生成package.json文件
npm init
安装并下载webpack
npm install --save-dev webapck
webpack配置
enry
entry: 入口文件
最简单的webpack.config.js文件：
module.exports = {
entry: './app.js',
output: {
path: './dist',
filename: 'app.bundle.js'
}
}
webpack会在执行目录下创建dist目录，将app.js文件打包为app.bundle.js文件放在dist目录里
entry支持多种配置方式
单一条目（速记）语法
用法： entry: string|Array<string>
webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js'
};
该entry属性的单一条目语法是以下的简写：
webpack.config.js
module.exports = {
entry: {
main: './path/to/my/entry/file.js'
}
};
对象语法
用法： entry: {[entryChunkName: string]: string|Array<string>}
webpack.config.js
module.exports = {
entry: {
app: './src/app.js',
adminApp: './src/adminApp.js'
},
output: {
filename: '_[name].js'
}
};
对象语法更详细。但是，这是在应用程序中定义条目/条目的最具扩展性的方法。
如果entry配置时使用对象的形式, output中[name]就相当于一个占位符，会读取对象中的key值，打包后输出的文件名为_app.js 和 _adminApp.js。如果是以字符串配置，就只能以默认的名字命名_mian.js
多页面应用程序
webpack.config.js
module.exports = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
这是做什么的？我们告诉webpack我们想要3个独立的依赖图（如上例所示）。
output
output: 输出文件
webpack.config.js
module.exports = {
entry:base,
output: {
//导出目录
path: path.resolve(__dirname, 'uuudist'),
publicPath: "/output/uuudist/", // server-relative
//包规范格式
libraryTarget:'umd',
library: "MyLibrary",
//文件名
//chunkFilename:'[chunkhash]_[name].js',
//hash位数
hashDigestLength:3,
//导出文件
filename: '[name]_[chunkhash].js'
}
};
打包后的文件目录
path 导出路径(最好是绝对路径)
如果不希望这里涉及到的路径和执行webpack命令时的具体路径相关，而是希望相对于配置文件的路径的话，就需要使用path模块：
webpack.config.js
var path = require('path')
module.exports = {
entry: path.resolve(__dirname, './app.js'),
output: {
path: path.resolve(__dirname, './output'),
filename: 'output-file.js'
}
}
filename:文件导出名
[chunkhash]:
chunkhash和hash不一样，它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响。
hash ==> webpack的编译过程
chunkhash ==> webpack对每个文件的hash
hashDigestLength:3
filename: '[chunkhash]_[name].js''
等同于:
filename: '[chunkhash:3]_[name].js'
得到的结果:
chunkFilename
chunkFilename一般是用来做异步加载,可以和publicPath配合
//文件名
chunkFilename:'[chunkhash:3]_[name].js',
// [name] 关联下面require.ensure的第三个参数
index.js
//require.ensure(dependencies: String[], callback: function(require), chunkName: String)
// require.ensure三个参数:
依赖,function,name
//异步加载
require.ensure([],(require)=>{
require('./index1.js')
},'dynamic')
异步操作打包后的文件名
异步加载需要手动指定publicPath,异步加载文件的前缀 publicPath参数和服务器强关联, 所以上线时会写成cdn形式
library
//定义包的名字
library: "MyLibrary",
如果定义包的名字是MyLibrary，会把模块的结果赋值给MyLibrary
//包规范格式
libraryTarget:'umd',
//定义包的名字
library: "MyLibrary",
umd: Universal Module Definition，称之为 通用模块规范
浏览器和node端都兼容 如果把umd改为commonjs
兼容commonjs
兼容amd
