图解Webpack之基础篇

本节主要用于入门webpack，首先用一张利用MindMaster绘制思维导图开篇来阐述本文的主要内容，读者可在此基础上进行扩展自己的思维导图。

一、Entry

定义：指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。(从入口开始，搜寻并递归解析出所有入口依赖的模块)

1.1 单入口

对于单入口文件，其值为string类型，打包形成一个chunk，输出一个bundle文件。

 
 
 
 
    
  
  
  
  
  1. module.exports = { 
    2.   
  
  
  
  2.     entry: './src/index.js' 
    3.   
  
  
  
  3. } 
    4.

1.2 多入口

输入为一个数组，但是入口文件最终只会形成一个chunk，输出出去只有一个bundle文件。

 
 
 
 
    
  
  
  
  
  1. module.exports = { 
    2.   
  
  
  
  2.     entry: ['./src/index.js','./src/add.js'] 
    3.   
  
  
  
  3. } 
    4.

输入为对象，有几个入口文件就形成几个chunk，输出几个bundle1文件

 
 
 
 
    
  
  
  
  
  1. module.exports = { 
    2.   
  
  
  
  2.     entry: { 
    3.   
  
  
  
  3.         index: './src/index.js', 
    4.   
  
  
  
  4.         add: './src/add.js', 
    5.   
  
  
  
  5.     } 
    6.   
  
  
  
  6. } 
    7.

1.3 动态入口

输入为一个函数(同步或异步)，用于动态的返回上面所需的入口内容。

 
 
 
 
    
  
  
  
  
  1. module.exports = { 
    2.   
  
  
  
  2.     entry: () => new Promise((resolve) => resolve(['./src/index.js','./src/add.js'])) 
    3.   
  
  
  
  3. } 
    4.

二、Output

指示webpack如何去输出、以及在哪里输出你的bundle、asset 和其他你所打包或使用 webpack载入的任何内容。

2.1 名称

对于输出的名字，常用的主要有两类:filename(输出bundle名称)和chunkFilename(非入口chunk名称)。

filename(配置输出文件的名称，为string类型)

 
 
 
 
    
  
  
  
  
  1. module.exports = { 
    2.   
  
  
  
  2.     //文件名称（指定名称+目录） 
    3.   
  
  
  
  3.     filename: '[name].js' 
    4.   
  
  
  
  4. } 
    5.

chunkFilename(配置非入口chunk的名称)

对于非入口文件，产生方式有两种：方式一是通过import语法会将一个文件单独分割成一个chunk;方式二是利用optimization将node_modules分割成chunk。(见后续博客)

 
 
 
 
    
  
  
  
  
  1. module.exports = { 
    2.   
  
  
  
  2.     //非入口chunk名称 
    3.   
  
  
  
  3.     chunkFilename: '[name]_chunk.js' 
    4.   
  
  
  
  4. } 
    5.

2.2 路径

对于配置的输出路径，常用的主要有两个：path和publicPath。

path(配置输出文件存放的目录，必须是string类型的绝对路径)

 
 
 
 
    
  
  
  
  
  1. module.exports = { 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. path: path.resolve(__dirname, 'dist_[hash]') 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. } 
    6.

publicPath(所有资源引入公共路径前缀)

 
 
 
 
    
  
  
  
  
  1. module.exports = { 
    2.   
  
  
  
  2.     publicPath: 'https://cdn.example.com/' 
    3.   
  
  
  
  3. } 
    4.

2.3 输出库

当用webpack去构建一个可以被其它模块导入使用的库时，需要用到libraryTarget和library。其中libraryTarget配置何种方式导出库;library配置导出库名称。

 
 
 
 
    
  
  
  
  
  1. module.exports = { 
    2.   
  
  
  
  2.     library: '[name]', 
    3.   
  
  
  
  3.     libraryTarget: 'window',//var、assign、this、window、global、commonjs、commonjs2、amd、umd…… 
    4.   
  
  
  
  4. } 
    5.

三、Loader

webpack只能理解JavaScript和JSON文件，通过loader让webpack能够去处理其它类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

3.1 样式资源

对于css和less这样的样式资源，webpack不能直接进行处理，所以需要经过webpack翻译后才可以使用。此外不同浏览器对CSS的支持不同，为了CSS解决兼容性问题，可借助postcss-loader进行处理。

 
 
 
 
    
  
  
  
  
  1. module.export = { 
    2.   
  
  
  
  2.     …… 
    3.   
  
  
  
  3.     module: { 
    4.   
  
  
  
  4.         rules: [ 
    5.   
  
  
  
  5.             { 
    6.   
  
  
  
  6.                 test: /\.css$/, 
    7.   
  
  
  
  7.                 use: [ 
    8.   
  
  
  
  8.                     //创建style标签，将js中的样式资源插入到html文件中。 
    9.   
  
  
  
  9.                     'style-loader', 
    10.   
  
  
  
  10.                     // 将css文件变成commonjs模块加载到js中 
    11.   
  
  
  
  11.                     'css-loader', 
    12.   
  
  
  
  12.                     'postcss-loader', 
    13.   
  
  
  
  13.                 ] 
    14.   
  
  
  
  14.             }, 
    15.   
  
  
  
  15.             { 
    16.   
  
  
  
  16.                 test: /\.less$/, 
    17.   
  
  
  
  17.                 use: [ 
    18.   
  
  
  
  18.                     'style-loader', 
    19.   
  
  
  
  19.                     'css-loader', 
    20.   
  
  
  
  20.                     // 将less文件编译成css文件 
    21.   
  
  
  
  21.                     'less-loader', 
    22.   
  
  
  
  22.                 ] 
    23.   
  
  
  
  23.             } 
    24.   
  
  
  
  24.         ] 
    25.   
  
  
  
  25.     } 
    26.   
  
  
  
  26. } 
    27.

3.2 图片资源

对于图片资源来说，主要可以分为html中图片和非html中图片。对于url-loader或file-loader能够处理js、css等中的图片资源，但是不能直接处理html中的图片资源，所以需要引用html-loader，负责引入img，从而能被url-loader进行处理。

 
 
 
 
    
  
  
  
  
  1. module.exports = { 
    2.   
  
  
  
  2.     module: { 
    3.   
  
  
  
  3.         rules: [ 
    4.   
  
  
  
  4.             { 
    5.   
  
  
  
  5.                 test: /\.(png|jpg|gif)$/, 
    6.   
  
  
  
  6.                 loader: 'url-loader', 
    7.   
  
  
  
  7.                 options: { 
    8.   
  
  
  
  8.                     limit: 8 * 1024, 
    9.   
  
  
  
  9.                     name: '[hash:10].[ext]', 
    10.   
  
  
  
  10.                     outputPath: 'asset/images' 
    11.   
  
  
  
  11.                 } 
    12.   
  
  
  
  12.             }, 
    13.   
  
  
  
  13.             { 
    14.   
  
  
  
  14.                 test: /\.html/, 
    15.   
  
  
  
  15.                 loader: 'html-loader', 
    16.   
  
  
  
  16.             }, 
    17.   
  
  
  
  17.         ] 
    18.   
  
  
  
  18.     } 
    19.   
  
  
  
  19. } 
    20.

3.3 js文件

因为每个人写代码的风格不同，为了统一js文件的风格，规范代码，可以采用eslint-loader进行处理。

 
 
 
 
    
  
  
  
  
  1. module.exports = { 
    2.   
  
  
  
  2.     …… 
    3.   
  
  
  
  3.     module: { 
    4.   
  
  
  
  4.         rules: [ 
    5.   
  
  
  
  5.             { 
    6.   
  
  
  
  6.                 test: /\.js$/, 
    7.   
  
  
  
  7.                 exclude: /node_modules/, 
    8.   
  
  
  
  8.                 // 优先执行 
    9.   
  
  
  
  9.                 enfore: 'pre', 
    10.   
  
  
  
  10.                 loader: 'eslint-loader', 
    11.   
  
  
  
  11.                 options: { 
    12.   
  
  
  
  12.                     // fix: true 
    13.   
  
  
  
  13.                 } 
    14.   
  
  
  
  14.             } 
    15.   
  
  
  
  15.         ] 
    16.   
  
  
  
  16.     } 
    17.   
  
  
  
  17. } 
    18.

此处可以用比较权威的Airbnb来进行语法检查，需要在package.json中添加:

 
 
 
 
    
  
  
  
  
  1. "eslintConfig": { 
    2.   
  
  
  
  2.     "extends": "airbnb-base", 
    3.   
  
  
  
  3.     "env": { 
    4.   
  
  
  
  4.       "browser": true 
    5.   
  
  
  
  5.     } 
    6.   
  
  
  
  6. } 
    7.

不同浏览器对js代码的支持性不同，所以需要对js代码进行兼容性处理，可以利用babel-loader，配置方式主要有三种：

(1) 基本js兼容性处理-->@babel/preset-env

问题：只能转换基本语法，如Promise不能转换

(2)全部js兼容性处理--> @babel/polyfill

对于这个文件，只需要在js文件中直接引入即可 import '@babel/polyfill'; 这会将js有兼容性的东西全部带进来。

问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，导致文件体积太大了

(3)需要做兼容性处理的就做：按需加载 --> core-js

此时要把第二种方案的代码注释掉。

 
 
 
 
    
  
  
  
  
  1. module.exports = { 
    2.   
  
  
  
  2.     …… 
    3.   
  
  
  
  3.     module: { 
    4.   
  
  
  
  4.         rules: [ 
    5.   
  
  
  
  5.             { 
    6.   
  
  
  
  6.                 test: /\.js$/, 
    7.   
  
  
  
  7.                 exclude: /node_modules/, 
    8.   
  
  
  
  8.                 loader: 'babel-loader', 
    9.   
  
  
  
  9.                 options: { 
    10.   
  
  
  
  10.                     // 预设：指示babel做怎么样的兼容性处理 
    11.   
  
  
  
  11.                     presets: [ 
    12.   
  
  
  
  12.                         '@babel/preset-env', 
    13.   
  
  
  
  13.                         { 
    14.   
  
  
  
  14.                             // 按需加载 
    15.   
  
  
  
  15.                             useBuiltIns: 'usage', 
    16.   
  
  
  
  16.                             // 指定core-js版本 
    17.   
  
  
  
  17.                             corejs: { 
    18.   
  
  
  
  18.                                 version: 3 
    19.   
  
  
  
  19.                             }, 
    20.   
  
  
  
  20.                             // 指定兼容性做到哪个版本浏览器 
    21.   
  
  
  
  21.                             targets: { 
    22.   
  
  
  
  22.                                 chrome: '60', 
    23.   
  
  
  
  23.                                 firefox: '60', 
    24.   
  
  
  
  24.                                 edge: '17', 
    25.   
  
  
  
  25.                                 safari: '10', 
    26.   
  
  
  
  26.                             } 
    27.   
  
  
  
  27.                         } 
    28.   
  
  
  
  28.                     ] 
    29.   
  
  
  
  29.                 } 
    30.   
  
  
  
  30.             } 
    31.   
  
  
  
  31.         ] 
    32.   
  
  
  
  32.     } 
    33.   
  
  
  
  33. } 
    34.

3.4 其它资源

对于不需要进行优化、压缩等进行处理的文件，例如字体图标、SVG等，可以直接被引入使用，这个时候用file-loader直接处理即可。

 
 
 
 
    
  
  
  
  
  1. module.exports = { 
    2.   
  
  
  
  2.     module: { 
    3.   
  
  
  
  3.         rules: [ 
    4.   
  
  
  
  4.             { 
    5.   
  
  
  
  5.                 exclude: /\.(css|js|html|less|jpg|png|gif)$/, 
    6.   
  
  
  
  6.                 loader: 'file-loader', 
    7.   
  
  
  
  7.                 options: { 
    8.   
  
  
  
  8.                     name: '[hash:10].[ext]', 
    9.   
  
  
  
  9.                 } 
    10.   
  
  
  
  10.             } 
    11.   
  
  
  
  11.         ] 
    12.   
  
  
  
  12.     } 
    13.   
  
  
  
  13. } 
    14.

四、Plugin

插件目的是解决loader无法实现的其他事，可用于执行范围更广的任务，为webpack带来很大的灵活性。

4.1 HTML文件

为了简化HTML文件的创建，方便为webpack包提供服务，所以可以利用html-webpack-plugin插件。通过利用该插件可以自动引入JS、CSS等文件，可以对HTM代码进行压缩;此外，该插件还可以利用提供的HTML模板。

 
 
 
 
    
  
  
  
  
  1. module.exports = { 
    2.   
  
  
  
  2.     plugins: [ 
    3.   
  
  
  
  3.         // html-webpack-plugin插件，默认会创建一个空的HTML，自动引入打包输出的所有资源（JS、CSS） 
    4.   
  
  
  
  4.         new HtmlWebpackPlugin({ 
    5.   
  
  
  
  5.             // 需要有结构的HTML文件，可以通过配置template，复制该html文件，并自动引入自动引入打包输出的所有资源（JS、CSS） 
    6.   
  
  
  
  6.             template: './src/index.html', 
    7.   
  
  
  
  7.             // 压缩html代码 
    8.   
  
  
  
  8.             minify: { 
    9.   
  
  
  
  9.                 // 移除空格 
    10.   
  
  
  
  10.                 collapseWhitespace: true, 
    11.   
  
  
  
  11.                 // 移除注释 
    12.   
  
  
  
  12.                 removeComments: true, 
    13.   
  
  
  
  13.             } 
    14.   
  
  
  
  14.         }) 
    15.   
  
  
  
  15.     ], 
    16.   
  
  
  
  16. } 
    17.

4.2 CSS文件

对于CSS文件，利用插件主要需要处理三个方面：提取CSS文件、兼容性处理(配合postcss-loader)和对CSS文件进行压缩。

提取CSS文件：mini-css-extract-plugin

兼容性处理：post-preset-env

压缩：optimize-css-assets-webpack-plugin

 
 
 
 
    
  
  
  
  
  1. module.exports = { 
    2.   
  
  
  
  2.     …… 
    3.   
  
  
  
  3.     module: { 
    4.   
  
  
  
  4.         rules: [ 
    5.   
  
  
  
  5.             { 
    6.   
  
  
  
  6.                 test: /\.css$/, 
    7.   
  
  
  
  7.                 use: [ 
    8.   
  
  
  
  8.                     // 'style-loader', 
    9.   
  
  
  
  9.                     MiniCssExtractPlugin.loader,// 用这个loader取代style-loader。作用：提取js中的css成单独文件 
    10.   
  
  
  
  10.                     'css-loader', 
    11.   
  
  
  
  11.                     { 
    12.   
  
  
  
  12.                         loader: 'postcss-loader', 
    13.   
  
  
  
  13.                         options: { 
    14.   
  
  
  
  14.                             ident: 'postcss', 
    15.   
  
  
  
  15.                             plugins: () => [ 
    16.   
  
  
  
  16.                                 require('postcss-preset-env')() 
    17.   
  
  
  
  17.                             ] 
    18.   
  
  
  
  18.                         } 
    19.   
  
  
  
  19.                     } 
    20.   
  
  
  
  20.                 ] 
    21.   
  
  
  
  21.             }, 
    22.   
  
  
  
  22.         ] 
    23.   
  
  
  
  23.     }, 
    24.   
  
  
  
  24.     plugins: [ 
    25.   
  
  
  
  25.         new MiniCssExtractPlugin({ 
    26.   
  
  
  
  26.             // 对输出的css文件进行重命名 
    27.   
  
  
  
  27.             filename: 'css/[name].css' 
    28.   
  
  
  
  28.         }), 
    29.   
  
  
  
  29.         // 压缩css 
    30.   
  
  
  
  30.         new OptimizeCssAssetsWebpackPlugin(), 
    31.   
  
  
  
  31.     ] 
    32.   
  
  
  
  32. } 
    33.

五、Mode

指示wenpack使用相应模式进行配置。

选项 描述
development 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。
production 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin。
none 退出任何默认优化选项

本文转载自微信公众号「前端点线面」，作者前端点线面。转载本文请联系前端点线面公众号。

网站标题：图解Webpack之基础篇
URL链接：http://www.shufengxianlan.com/qtweb/news30/420030.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

App设计知识

分类信息网

广安园林景观设计　　 　资中网站建设　　 　网站制作　　 　网站设计制作报价　　 　宜宾网站建设　　 　重庆机房托管　　 　广安网站建设　　 　背发光字　　 　犀浦雨棚定制　　 　江油网站建设　　 　德阳网站建设　　 　网络营销推广　　 　防护网厂　　 　成都网站建设　　 　瑞杰管理　　 　成都小谭网创广告　　 　成都广告设计　　 　网络营销推广　　 　云虚拟主机　　 　微信开发