Webpack记录文档
- 概念: webpack 是一个古代 JavaScript 应用程序的动态模块打包器(module bundler)。当 webpack 解决应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中蕴含应用程序须要的每个模块，而后将所有这些模块打包成一个或多个 bundle。
打包第一个文件:
全局装置webpack:
npm install webpack -g- 新建一个文件夹放入两个文件，一个为html一个为就是文件，其中HTML引入该js文件打包后的文件名
- 执行webpack js文件 打包后的文件名
此时如果呈现报错:
Cannot find module 'webpack-cli'请执行: npm install --save-dev webpack再执行呈现:
WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.请先执行 npm init -y, 生成package.json在新建一个webpack.config.js配置文件，用于配置webpack选项写入:const path = require('path')// 通过Node模块，向里面裸露一个配置module.exports = { entry:path.join(__dirname, './src/main.js'), // 打包文件 output: { path: path.join(__dirname, './dist') // 打包好的文件名 }, mode: 'development' // 设置mode}此时再执行打包将无报错，且生成的文件将放入当前目录下的dist文件夹, 默认文件名为main.js
- 五大外围概念:
| 中文名 | 配置项 | 概述 |
| ---- | ---- | ---- |
| 入口 | entry | 构建依赖图的开始 |
| 输入 | output | 打包产出地位 |
| 转化器 | loader | 编译的时候,对各种类型的模块, 进行转换解决 |
| 插件 | plugin | 对每个工作环节，提供性能 |
| 模式 | mode | 设置打包环境 | 意识webpack配置文件(即webpack.config.js)
- 作用: 把配置参数，抽离到独自的文件，便于我的项目配置。
根底格局:
const path = require('path') // node的根底path模块const 插件1 = require('插件1')module.exports = { //模式——设置开发模式 mode: 'development', //入口——指定src/index.js为入口文件 entry: { main: './src/index.js' }, //输入——指定dist/bundle.js为输入文件 output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, //转换器。模块>规定 module: { rules: [ { test: /\.后缀名$/, use: [ { loader: '转换器1', options: {} //转换器1配置 } ] } ] }, //插件 plugins: [ new 插件1({ //插件配置 }) ]}
入口(entry):
每个entry属性，对应一个入口文件，便于单页、多页利用的js引入,
单页面入口entry: { main: './src/index.js}// 可缩写为entry: './src/index.js'多页面入口 entry: { one: './src/one/index.js', two: './src/two/index.js', three: './src/three/index.js' }
也可应用node的path模块实现获取绝对于配置文件的门路
const path = require('path') module.exports = { entry: path.resolve(__dirname, './app.js') } // 留神，这里的__dirname, 为两个下划线entry反对三种格局:
对象:
entry: { <key>: <value>}// key能够是简略的字符串, 对应着output.filename配置中的[name]变量,entry: { 'app-entry': './app.js'}// key还能够是门路字符串。此时webpack会主动生成门路目录，并将门路的最初作为[name]entry: { 'path/of/entry': './app.js'}// value如果是字符串，而且必须是正当的noderequire函数参数字符串。比方文件门路：'./app.js'(require('./app.js'))；比方装置的npm模块：'lodash'(require('lodash')) entry: { 'my-lodash': 'lodash'},output: { path: './output', filename: '[name].js'}数组:
entry: ['./app.js', 'lodash']等价于:entry: { main: ['./app.js', 'lodash']}字符串:
entry: './app.js'等价于entry: { main: './app.js'}
output（输入）
output是影响编译输入的选项。output选项通知webpack怎么把编译文件写入磁盘。留神，尽管能够有很多输出口，然而只有一个输入配置
output: { path: path.resolve(__dirname, 'dist') filename: [name].js // 应用[name]占位符，自动识别入口文件名，从而辨别打包文件名}- output.filename: 指定输入到硬盘的文件的的文件名。这里不能是一个相对的门路！output.path会确定该文件的存在硬盘额门路的。filename仅仅用来给每个文件命名而已。
[name]被入口的名字替换.
[hash]被编译器hash替换.
[chunkhash] 被入口的hash替换.
- output.path 编译后的文件寄存门路，绝对路径，取[hash]将被编译后的文件hash替换
- output.chunkFilename 非入口chunk的文件名，作为一个相对路径放到output.path里。
module 配置如何解决模块
- rules配置模块的读取和解析规定，通常用来配置Loader，类型是一个数组，数组里的每一项都形容了怎么去解决特定的文件。
匹配规定：
1. 条件匹配： 通过test/include/exclude三个配置项来命中Loader要利用的规定文件2. 利用规定： 对选中的文件通过use配置项来利用loader，能够利用一个loader或者从后往前利用一组loader，同时还能够别离给loader传入参数。3. 重置程序，一组loader的执行程序默认是从右到左执行，通过exforce选项能够让其中一个loader的执行程序放到最前或者最初。module: { rules: [ { test: /\.js$/, use: ['babel-loader?cacheDirectory'], include: path.resolve(__dirname, 'src') }, { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'], exclude: path.resolve(__dirname, 'node_modules') }, { // test、include、exclude还反对数组类型 test: [/\.jsx?$/, /\.tsx?$/], include: [ path.resolve(__dirname, 'src'), path.resolve(__dirname, 'test') ], exclude: [ path.resolve(__dirname, 'node_modules'), path.resolve(__dirname, 'bower_modules') ] } ]}在loader须要传入很多参数的时候，咱们还能够通过一个object来形容，如：
use: [ { loader: 'babel-loader', options: { cacheDirectory: true }, // enforce:'post' 的含意是把该 Loader 的执行程序放到最初 // enforce 的值还能够是 pre，代表把 Loader 的执行程序放到最后面 enforce:'post' }]- noParse: 能够让webpack疏忽局部未采纳模块化的文件的递归解析和解决，类型能够为RegExp, [RegExp], function其中一个
常见的loader配置：
{ // 加载图像 test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ]}{ // 加载字体 test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ 'file-loader' ]}{ // 加载css test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
plugins:
//通过new实例，启用插件plugins: [ new webpack.ProgressPlugin(), //webpack自带一系列插件 new HtmlWebpackPlugin({template: './src/index.html'}) //应用对象，为插件配置参数]常见的plugin：
- HotModuleReplacementPlugin –开启全局的模块热替换(HMR)；
- NamedModulesPlugin –当模块热替换(HMR)时在浏览器控制台输入对用户更敌对的模块名字信息；
- CommonsChunkPlugin –提取chunk公共局部；
- ExtractTextPlugin –独立生成css文件，以外链的模式加载；
- UglifyJsPlugin –压缩js；
- HtmlWebpackPlugin –应用模版生成html。
环境变量：
webpack能够设置环境变量以辨别生产模式还是开发模式，由此执行不同的操作。
const NODE_ENV = process.env.NODE_ENV // 可获取到环境变量可由此对目前是生产模式还是开发模式- 开发模式：webpack.dev.js配置文件
- 生产模式：webpack.prod.js配置文件
resolve: webpack在构建包的时候会按目录的进行文件的查找，resolve属性中的extensions数组中用于配置程序能够自行补全哪些文件后缀。例如：
resolve: { nodules: [path.resolve(__dirname, "node_modules")], extensions: ['.js', '.json', '.scss', '.vue', '.json'] // 模块别名定义，不便后间接援用别名， 无需多写长地址 alias: { '@/static': resolve('static'), // 将@/static指向以后我的项目，下的static目录 '@': resolve('src'), // 将@指向src目录 }}命令：
//开发模式，启动服务器webpack-dev-server --open --config webpack.dev.js//生产模式，打包webpack --config webpack.prod.js- webpack还能够反对Node操作，可通过Node对现有文件进行操作，以满足打包所需。
应用demo参考： 阮一峰的https://github.com/ruanyf/web...