Webpack 4 学习03(配置入口和出口的进阶使用)

一、单出口形式

webpack.config.js

const path = require('path');

module.exports = {
  //单出口形式
  entry:['./public/index.js','./public/index2.js'],//有多个文件
  output:{
    path:path.resolve(__dirname,'build'),
    filename:'bundle.js'
  }
}

  • 运行npm run dev

    生成唯一的打包文件 bundle.js

二、多出口形式

? webpack.config.js

const path = require('path');

module.exports = {
  //多出口形式
  entry:{
    entryOne:'./public/entryOne/index.js',
    entryTwo:'./public/entryTwo/index.js',
  },
  output:{
    path:path.resolve(__dirname,'build'),
    filename:'[name].js'
  }
}

?

  • 文件结构

  • 运行npm run dev
    • 生成两个打包文件

原文地址:https://www.cnblogs.com/hunterxing/p/10425287.html

时间: 2024-10-22 17:32:43

Webpack 4 学习03(配置入口和出口的进阶使用)的相关文章

Webpack 4 学习04(配置webpack-dev-server)

前提: Webpack 4 学习01(基础配置) ? Webpack 4 学习02(通过配置文件打包) 一.了解 webpack-dev-server webpack-dev-server用来配置本地服务器 为 webpack 打包生成的文件提供web服务 自动刷新和热替换(HMR) 二.安装webpack-dev-server npm install --save-dev webpack-dev-server 三. 配置webpack.config.js文件 devServer:{ conte

Webpack 4 学习02(使用配置文件进行打包)

上一讲中我们打包没有用到webpack.config.js配置文件,webpack4把自己定位为一个零配置的工具.这一讲学习配置文件使用,更好地学习webpack. 上一讲 Webpack 4 学习01(基础配置) 根目录下新建一个webpack.config.js文件 (记载配置信息) 配置文件 const path = require('path'); module.exports = { entry:'./public/index.js', output:{ path:path.resol

Webpack 入门学习

1.什么是Webpack? Webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用. 2.WebPack和Grunt以及Gulp相比有什么特性? 其实WebPack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过WebPack的优点使得WebPack可以替代G

Webpack 4 学习05(打包css)

webpack 自身只理解 JavaScript, 想让 webpack 能够去处理那些非 JavaScript 文件,我们将使用到loader loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理. 安装loader npm install style-loader css-loader --save-dev 配置loader 在webpack.config.js文件里配置module中的rules,如下:

webpack配置之webpack.config.js文件配置

webpack配置之webpack.config.js文件配置 webpack.config.js webpack resolve 1.总是手动的输入webpack的输入输出文件路径,是一件非常繁琐的事情.我们尝试用文件的形式将输入输出文件夹配置好.新建一个js文件,并命名为webpack.config.js[目前只能命名为这个,不然程序不识别] webpack.config.js 2.在webpack.config.js文件内输入以下代码 module.exports = { entry: '

ThinkPhp学习03

原文:ThinkPhp学习03 一.ThinkPHP 3 的输出      (重点) a.通过 echo 等PHP原生的输出方式在页面中输出 b.通过display方法输出   想分配变量可以使用assign方法 public function index(){ $name="潘达"; $this->assign('name',$name); //将$name分配给变量name,从而让模板获得 $this->display(); } 模板获取 在对应的tpl下创建模块文件夹

vue+vux+es6+webpack移动端常用配置步骤

1.创建项目(vue项目的流程就不多讲了)2.cnpm install vux --save3.在build/webpack.base.conf.js配置:const vuxLoader = require('vux-loader')把第一个module.exports赋值变量let webpackConfig ={里面代码不动}然后这个放在最底部去 module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui', 'pr

Webpack 4 学习09(打包生成html)

所需插件 html-webpack-plugin 本教程基于已经搭建好的webpack环境,详见Webpack 4 学习01(基础配置) **了解html-webpack-plugin** HtmlWebpackPlugin会自动为你生成一个HTML文件,根据指定的index.html模板生成对应的 html 文件. 安装依赖 npm install html-webpack-plugin --save-dev 配置webpack.config.js文件 在头部定义常量,引入插件 const H

vue-cli安装webpack项目及初始配置

这个下载包是自己基于 webpack 搞的,可以看看https://github.com/chichengyu/webpack vue-cli安装 输入 npm install vue-cli -g # 如果速度慢,可以先安装 cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org # 然后再安装 vue-cli cnpm install vue-cli -g # 或者使用这节说到的 nrm 进行切换镜像源 http