webpack是一个模块打包器，可以根据入口文件，随着依赖关系将所有文件打包成js文件。

首先需要node环境，百度一下自己安装

webpack官网地址：https://www.webpackjs.com

首先，建立一个文件，叫webpack1（不能叫webpack，否则初始化报错）

初始化：

  1. npm init -y

初始化之后，文件夹中会出现一个package.json文件

之后安装webpack

  1. npm i -D webpack

webpack4还需要安装一个webpack-cli

  1. npm i -D webpack-cli

之后在根目录下创建一个src文件夹，里面放的是源码，里面放一个index.js，是入口文件；

在根目录建一个dist文件，用来盛放打包后的文件，dist文件夹中再放一个index.html文件；

再在跟目录下创建一个webpack.config.js文件，当做webpack的配置文件

在src/index.js中随便写点代码：

  1. import _ from 'lodash';
  2. import "./style/index.css";//loader=>css-loader module style-loader
  3. import "./style/a.scss";
  4. function createDomElement(){
  5.     let dom = document.createElement('div');
  6.     dom.innerHTML=_.join(["aicoder.com","好!","线下实习"],"");
  7.     // dom.className="box";
  8.     dom.classList.add("box");
  9.     return dom;
  10. }
  11.  
  12. let divDom = createDomElement();
  13.  
  14. document.body.appendChild(divDom);

在webpack.config.js中作出简单配置：

  1. const path = require("path");
  2. module.exports={
  3.     entry:"./src/index.js",//入口文件
  4.     mode:"development",//模式是开发环境
  5.     output:{//出口文件时main.js，打包到当前目录的dist文件夹下
  6.         filename:"main.js",
  7.         path:path.resolve(__dirname,"dist")
  8.     },
  9.     module: {
  10.         rules: [
  11.             { //告诉webpack，当import,require遇到.css文件时,用css-loader、style-loader处理一下
  12.                 test: /\.(sc|c|sa)ss$/,//scss,css,sass
  13.                 use: ["style-loader","css-loader","sass-loader"],//loader的使用数据是从右向左的
  14.             }
  15.         ]
  16.     }
  17. }

在dist/index.html中引入打包生成的main.js

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <script src="./main.js"></script>
  11. </body>
  12. </html>

当然我们还在src/style/中加了index.css和a.sass文件，

如果想让webpack打包js之外的文件，需要安装对应的loader

css需要css-loader(用来解析css文件)、style-loader(用来将打包好的css文件用style标签引入)

scss文件需要 sass-loader 和 node-sass

一口气安装了：

  1. npm i -D css-loader style-loader sass-loader node-sass

之后执行npx webpack

dist文件中就会出现打包好的main.js

然后就可以打开dist/index.html看一下效果。

如果我们想执行自己的自定义命令来让webpack打包，我们可以在package.json的script中配置一下命令，如：

  1. "scripts": {
  2.     "test": "echo \"Error: no test specified\" && exit 1",
  3.     "build":"npx webpack -c webpack.config.js"
  4.   },

之后我们执行 npm run build就可以让webpack打包了

上面的-c webpack.config.js指的是 webpack是根据哪个文件的配置打包的

----------------------------------------------------------------------------------------------------------------------------

由于webpack是将所有的依赖文件打包成一个文件，当我们想调试css样式时，我们很难在控制台看到某一句代码是来自哪个源文件的，所以我们需要开启sourceMap，

在webpack.config.js中国这样配置：

  1. module: {
  2.         rules: [
  3.             {
  4.                 test: /\.(sc|c|sa)ss$/,//scss,css,sass
  5.                 use: ["style-loader",{
  6.                         loader:"css-loader",
  7.                         options:{
  8.                             sourceMap:true
  9.                         }
  10.                 },{
  11.                     loader:"sass-loader",
  12.                     options:{
  13.                         sourceMap:true
  14.                     }
  15.                 }],
  16.             }
  17.         ]
  18.     }

然后执行npm run build 在控制台查看css样式，就可以清晰的看到某个样式，是来自哪一个文件（index.css还是a.scss一目了然）

------------------------------------------------------------------------------------------------------------

另外我们一般还会用到postcss  以及  autuoprefixer

postcss 可以对css进行预处理   校验css   以及自动添加前缀   可以提前使用css的一些新特性

首先安装   (我们此处只用了 自动添加前缀的插件  所以额外安装了autoprefixer)

  1. npm i -D postcss-loader
  2. npm install --save-dev autoprefixer

在webpack.config.js中添加对应配置：

  1. module: {
  2.         rules: [
  3.             {
  4.                 test: /\.(sc|c|sa)ss$/,//scss,css,sass
  5.                 use: ["style-loader",{
  6.                         loader:"css-loader",
  7.                         options:{
  8.                             sourceMap:true
  9.                         }
  10.                 },{
  11.                     loader:"postcss-loader",
  12.                     options:{
  13.                         ident:"postcss",//唯一标识，建议使用postcss
  14.                         sourceMap:true,
  15.                         plugins:(loader)=>[
  16.                             require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//浏览器 份额大于0.15% 在中国 (已经包括IE8了)
  1.                         ]
  2.                     }
  3.                 },{
  4.                     loader:"sass-loader",
  5.                     options:{
  6.                         sourceMap:true
  7.                     }
  8.                 }],
  9.             }
  10.         ]
  11.     }

----------------------------------------------------------------------------------------------------

将css文件单独抽离出来

  1. npm install --save-dev mini-css-extract-plugin

一般我们都是在生产环境将css文件单独抽离出来的，所以我们在根目录中创建webpack.product.config.js文件，用来配置生产环境下的webpack配置，将上面的webpack.config.js中的配置复制一份过来，做以下改变：

  1. const path = require("path");
  2. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  3. module.exports={
  4.     entry:"./src/index.js",//入口文件
  5.     mode:"production",//模式是开发环境
  6.     output:{//出口文件时main.js，打包到当前目录的dist文件夹下
  7.         filename:"main.js",
  8.         path:path.resolve(__dirname,"dist")
  9.     },
  10.     module: {
  11.         rules: [
  12.             {
  13.                 test: /\.(sc|c|sa)ss$/,//scss,css,sass
  14.                 use: [
  15.                     MiniCssExtractPlugin.loader,{
  16.                         loader:"css-loader",
  17.                         options:{
  18.                             sourceMap:true
  19.                         }
  20.                 },{
  21.                     loader:"postcss-loader",
  22.                     options:{
  23.                         ident:"postcss",//唯一标识，建议使用postcss
  24.                         sourceMap:true,
  25.                         plugins:(loader)=>[
  26.                             require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//浏览器 份额大于0.15% 在中国 (已经包括IE8了)
  27.                         ]
  28.                     }
  29.                 },{
  30.                     loader:"sass-loader",
  31.                     options:{
  32.                         sourceMap:true
  33.                     }
  34.                 }],
  35.             }
  36.         ]
  37.     },
  38.     plugins: [
  39.         new MiniCssExtractPlugin({
  40.             // Options similar to the same options in webpackOptions.output
  41.             // both options are optional
  42.             filename:'[name].[hash].css',
  43.             chunkFilename:'[id].[hash].css',
  44.         })
  45.     ],
  46. }

执行如下命令：

  1. npx webpack --config webpack.product.config.js

就可以用这个配置文件打包了

当然，如果我们需要多次打包 这样输入命令显得有点复杂，我们可以在package.json中的script中增加一个脚本命令：

  1. "dist": "npx webpack --config webpack.product.config.js"

之后，运行npm run dist与上述命令等效

----------------------------------------------------------------------------------------------------------------------------------

css压缩：（生产环境才能用到）

安装这个插件

  1. npm install optimize-css-assets-webpack-plugin --save-dev

在webpack.product.config.js配置：

  1. const path = require("path");
  2. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  3. const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
  4. module.exports={
  5.     entry:"./src/index.js",//入口文件
  6.     mode:"production",//模式是开发环境
  7.     output:{//出口文件时main.js，打包到当前目录的dist文件夹下
  8.         filename:"main.js",
  9.         path:path.resolve(__dirname,"dist")
  10.     },
  11.     module: {
  12.         rules: [
  13.             {
  14.                 test: /\.(sc|c|sa)ss$/,//scss,css,sass
  15.                 use: [
  16.                     MiniCssExtractPlugin.loader,{
  17.                         loader:"css-loader",
  18.                         options:{
  19.                             sourceMap:true
  20.                         }
  21.                 },{
  22.                     loader:"postcss-loader",
  23.                     options:{
  24.                         ident:"postcss",//唯一标识，建议使用postcss
  25.                         sourceMap:true,
  26.                         plugins:(loader)=>[
  27.                             require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//浏览器 份额大于0.15% 在中国 (已经包括IE8了)
  28.                         ]
  29.                     }
  30.                 },{
  31.                     loader:"sass-loader",
  32.                     options:{
  33.                         sourceMap:true
  34.                     }
  35.                 }],
  36.             }
  37.         ]
  38.     },
  39.     plugins: [
  40.         new MiniCssExtractPlugin({
  41.             // Options similar to the same options in webpackOptions.output
  42.             // both options are optional
  43.             filename:'[name].css',
  44.             chunkFilename:'[id].css',
  45.         })
  46.     ],
  47.     optimization:{
  48.         minimizer:[new OptimizeCSSAssetsPlutin({})]
  49.     }
  50. }

之后执行 npm run dist打包  即可压缩css代码

-------------------------------------------------------------------

js压缩：（生产环境用）

  1. npm i -D uglifyjs-webpack-plugin

在webpack.product.config.js中加入配置：

  1. const path = require("path");
  2. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  3. const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
  4. const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
  5. module.exports={
  6.     entry:"./src/index.js",//入口文件
  7.     mode:"production",//模式是开发环境
  8.     output:{//出口文件时main.js，打包到当前目录的dist文件夹下
  9.         filename:"main.js",
  10.         path:path.resolve(__dirname,"dist")
  11.     },
  12.     module: {
  13.         rules: [
  14.             {
  15.                 test: /\.(sc|c|sa)ss$/,//scss,css,sass
  16.                 use: [
  17.                     MiniCssExtractPlugin.loader,{
  18.                         loader:"css-loader",
  19.                         options:{
  20.                             sourceMap:true
  21.                         }
  22.                 },{
  23.                     loader:"postcss-loader",
  24.                     options:{
  25.                         ident:"postcss",//唯一标识，建议使用postcss
  26.                         sourceMap:true,
  27.                         plugins:(loader)=>[
  28.                             require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//浏览器 份额大于0.15% 在中国 (已经包括IE8了)
  29.                         ]
  30.                     }
  31.                 },{
  32.                     loader:"sass-loader",
  33.                     options:{
  34.                         sourceMap:true
  35.                     }
  36.                 }],
  37.             },
  38.             // {
  39.             //     test: /\.js$/,
  40.             //     loader: 'babel-loader',
  41.             //     exclude: /node_modules/,
  42.             // }
  43.         ]
  44.     },
  45.     plugins: [
  46.         new MiniCssExtractPlugin({
  47.             // Options similar to the same options in webpackOptions.output
  48.             // both options are optional
  49.             filename:'[name].css',
  50.             chunkFilename:'[id].css',
  51.         })
  52.     ],
  53.     optimization:{
  54.         minimizer:[
  55.             new UglifyJsPlugin({
  56.                 cache: true,
  57.                 parallel: true,
  58.                 /**
  59.                  *  sourceMap 和 devtool: 'inline-source-map', 冲突
  60.                  */
  61.                 sourceMap: false, // set to true if you want JS source maps,
  62.                 /**
  63.                  *  extractComments 导出备注
  64.                  */
  65.                 extractComments: 'all'
  66.             }),
  67.             new OptimizeCSSAssetsPlutin({})
  68.         ]
  69.     }
  70.  
  71. }

然后执行npm run dist 就行

----------------------------------------------------------------------------------

将es6转化转义成es5

安装：

  1. npm i -D babel-loader babel-core babel-preset-env

在根目录新建一个.babelrc文件

配置上：

  1. {
  2. "presets": ["@babel/env"]
  3. }

在webpack.product.config.js中配置：

  1. rules: [
  2.             {
  3.                 test: /\.js$/,
  4.                 loader: 'babel-loader',
  5.                 exclude: /node_modules/
  6.             }
  7.         ]

--------------------------------------------------------------------------

如何将每次打包的js和css文件 自动引入到html文件中：

  1. npm install html-webpack-plugin -D

在config.js中配置：

  1. const path = require("path");
  2. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  3. const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
  4. const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
  5. const HtmlWebpackPlugin = require("html-webpack-plugin");
  6. module.exports={
  7.     entry:"./src/index.js",//入口文件
  8.     mode:"production",//模式是开发环境
  9.     output:{//出口文件时main.js，打包到当前目录的dist文件夹下
  10.         filename:"main.[hash].js",
  11.         path:path.resolve(__dirname,"dist")
  12.     },
  13.     module: {
  14.         rules: [
  15.             {
  16.                 test: /\.(sc|c|sa)ss$/,//scss,css,sass
  17.                 use: [
  18.                     MiniCssExtractPlugin.loader,{
  19.                         loader:"css-loader",
  20.                         options:{
  21.                             sourceMap:true
  22.                         }
  23.                 },{
  24.                     loader:"postcss-loader",
  25.                     options:{
  26.                         ident:"postcss",//唯一标识，建议使用postcss
  27.                         sourceMap:true,
  28.                         plugins:(loader)=>[
  29.                             require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//浏览器 份额大于0.15% 在中国 (已经包括IE8了)
  30.                         ]
  31.                     }
  32.                 },{
  33.                     loader:"sass-loader",
  34.                     options:{
  35.                         sourceMap:true
  36.                     }
  37.                 }],
  38.             },
  39.             {
  40.                 test: /\.js$/,
  41.                 loader: 'babel-loader',
  42.                 exclude: /node_modules/
  43.             }
  44.         ]
  45.     },
  46.     plugins: [
  47.         new MiniCssExtractPlugin({
  48.             // Options similar to the same options in webpackOptions.output
  49.             // both options are optional
  50.             filename:'[name][hash].css',
  51.             chunkFilename:'[id][hash].css',
  52.         }),
  53.         new HtmlWebpackPlugin({
  54.             title:"webpack 温习",//默认值webpack App
  55.             filename:"main.html",//默认值index.html 是最终生成的文件名字
  56.             template:path.resolve(__dirname,"src/index.html"),
  57.             minify:{
  58.                 collapseWhitespace:true,//是否去空白
  59.                 removeComments:true,//是否移除注释
  60.                 removeAttributeQuotes:true,//移除属性的引号
  61.             }
  62.  
  63.         })
  64.     ],
  65.     optimization:{
  66.         minimizer:[
  67.             new UglifyJsPlugin({
  68.                 cache: true,
  69.                 parallel: true,
  70.                 /**
  71.                  *  sourceMap 和 devtool: 'inline-source-map', 冲突
  72.                  */
  73.                 sourceMap: false, // set to true if you want JS source maps,
  74.                 /**
  75.                  *  extractComments 导出备注
  76.                  */
  77.                 extractComments: 'all'
  78.             }),
  79.             new OptimizeCSSAssetsPlutin({})
  80.         ]
  81.     }
  82.  
  83. }

当然，需要在src下简历一个index.html模板

然后，执行npm run dist 即可

-----------------------------------------------------------------------

清理dist目录

每次打包 都会生成一些新的打包文件，从而之前的没用的打包文件也会保留下来，很不爽，所以我们需要一个自动清理dist目录的插件

  1. npm install clean-webpack-plugin --save-dev

在config.js中配置：

  1. const path = require("path");
  2. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  3. const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
  4. const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
  5. const HtmlWebpackPlugin = require("html-webpack-plugin");
  6. const {CleanWebpackPlugin} = require('clean-webpack-plugin');
  7. module.exports={
  8.     entry:"./src/index.js",//入口文件
  9.     mode:"production",//模式是开发环境
  10.     output:{//出口文件时main.js，打包到当前目录的dist文件夹下
  11.         filename:"main.[hash].js",
  12.         path:path.resolve(__dirname,"dist")
  13.     },
  14.     module: {
  15.         rules: [
  16.             {
  17.                 test: /\.(sc|c|sa)ss$/,//scss,css,sass
  18.                 use: [
  19.                     MiniCssExtractPlugin.loader,{
  20.                         loader:"css-loader",
  21.                         options:{
  22.                             sourceMap:true
  23.                         }
  24.                 },{
  25.                     loader:"postcss-loader",
  26.                     options:{
  27.                         ident:"postcss",//唯一标识，建议使用postcss
  28.                         sourceMap:true,
  29.                         plugins:(loader)=>[
  30.                             require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//浏览器 份额大于0.15% 在中国 (已经包括IE8了)
  31.                         ]
  32.                     }
  33.                 },{
  34.                     loader:"sass-loader",
  35.                     options:{
  36.                         sourceMap:true
  37.                     }
  38.                 }],
  39.             },
  40.             {
  41.                 test: /\.js$/,
  42.                 loader: 'babel-loader',
  43.                 exclude: /node_modules/
  44.             }
  45.         ]
  46.     },
  47.     plugins: [
  48.         new MiniCssExtractPlugin({
  49.             // Options similar to the same options in webpackOptions.output
  50.             // both options are optional
  51.             filename:'[name][hash].css',
  52.             chunkFilename:'[id][hash].css',
  53.         }),
  54.         new HtmlWebpackPlugin({
  55.             title:"webpack 温习",//默认值webpack App
  56.             filename:"main.html",//默认值index.html 是最终生成的文件名字
  57.             template:path.resolve(__dirname,"src/index.html"),
  58.             minify:{
  59.                 collapseWhitespace:true,//是否去空白
  60.                 removeComments:true,//是否移除注释
  61.                 removeAttributeQuotes:true,//移除属性的引号
  62.             }
  63.         }),
  64.         new CleanWebpackPlugin(),//清理构建文件夹
  65.     ],
  66.     optimization:{
  67.         minimizer:[
  68.             new UglifyJsPlugin({
  69.                 cache: true,
  70.                 parallel: true,
  71.                 /**
  72.                  *  sourceMap 和 devtool: 'inline-source-map', 冲突
  73.                  */
  74.                 sourceMap: false, // set to true if you want JS source maps,
  75.                 /**
  76.                  *  extractComments 导出备注
  77.                  */
  78.                 extractComments: 'all'
  79.             }),
  80.             new OptimizeCSSAssetsPlutin({})
  81.         ]
  82.     }
  83.  
  84. }

然后再次构建，dist目录会被清理一下再生成打包文件

--------------------------------------------------------------------------------------------------------

webpack处理图片

首先 打包时处理不了图片这种二进制文件的 路径，我们需要用一个file-loader插件

安装：

  1. npm install --save-dev file-loader

在config.js中配置：

  1. const path = require("path");
  2. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  3. const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
  4. const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
  5. const HtmlWebpackPlugin = require("html-webpack-plugin");
  6. const {CleanWebpackPlugin} = require('clean-webpack-plugin');
  7. module.exports={
  8.     entry:"./src/index.js",//入口文件
  9.     mode:"production",//模式是开发环境
  10.     output:{//出口文件时main.js，打包到当前目录的dist文件夹下
  11.         filename:"main.[hash].js",
  12.         path:path.resolve(__dirname,"dist")
  13.     },
  14.     module: {
  15.         rules: [
  16.             {
  17.                 test: /\.(sc|c|sa)ss$/,//scss,css,sass
  18.                 use: [
  19.                     MiniCssExtractPlugin.loader,{
  20.                         loader:"css-loader",
  21.                         options:{
  22.                             sourceMap:true
  23.                         }
  24.                 },{
  25.                     loader:"postcss-loader",
  26.                     options:{
  27.                         ident:"postcss",//唯一标识，建议使用postcss
  28.                         sourceMap:true,
  29.                         plugins:(loader)=>[
  30.                             require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//浏览器 份额大于0.15% 在中国 (已经包括IE8了)
  31.                         ]
  32.                     }
  33.                 },{
  34.                     loader:"sass-loader",
  35.                     options:{
  36.                         sourceMap:true
  37.                     }
  38.                 }],
  39.             },
  40.             {
  41.                 test: /\.js$/,
  42.                 loader: 'babel-loader',
  43.                 exclude: /node_modules/
  44.             },
  45.             {//处理图片 路径
  46.                 test:/\.(png|svg|gif|jpg|jpeg)$/,
  47.                 use:[
  48.                     'file-loader'
  49.                 ]
  50.             }
  51.         ]
  52.     },
  53.     plugins: [
  54.         new MiniCssExtractPlugin({
  55.             // Options similar to the same options in webpackOptions.output
  56.             // both options are optional
  57.             filename:'[name][hash].css',
  58.             chunkFilename:'[id][hash].css',
  59.         }),
  60.         new HtmlWebpackPlugin({
  61.             title:"webpack 温习",//默认值webpack App
  62.             filename:"main.html",//默认值index.html 是最终生成的文件名字
  63.             template:path.resolve(__dirname,"src/index.html"),
  64.             minify:{
  65.                 collapseWhitespace:true,//是否去空白
  66.                 removeComments:true,//是否移除注释
  67.                 removeAttributeQuotes:true,//移除属性的引号
  68.             }
  69.         }),
  70.         new CleanWebpackPlugin(),//清理构建文件夹
  71.     ],
  72.     optimization:{
  73.         minimizer:[
  74.             new UglifyJsPlugin({
  75.                 cache: true,
  76.                 parallel: true,
  77.                 /**
  78.                  *  sourceMap 和 devtool: 'inline-source-map', 冲突
  79.                  */
  80.                 sourceMap: false, // set to true if you want JS source maps,
  81.                 /**
  82.                  *  extractComments 导出备注
  83.                  */
  84.                 extractComments: 'all'
  85.             }),
  86.             new OptimizeCSSAssetsPlutin({})
  87.         ]
  88.     }
  89.  
  90. }

这样，打包时，图片路径就不会报错了

打包后，dist中会多出打包后的图片文件

那么，如果我们想将图片进行优化呢？

我们需要借助一个插件：

  1. npm install image-webpack-loader --save-dev

config.js配置：

  1. const path = require("path");
  2. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  3. const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
  4. const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
  5. const HtmlWebpackPlugin = require("html-webpack-plugin");
  6. const {CleanWebpackPlugin} = require('clean-webpack-plugin');
  7. module.exports={
  8.     entry:"./src/index.js",//入口文件
  9.     mode:"production",//模式是开发环境
  10.     output:{//出口文件时main.js，打包到当前目录的dist文件夹下
  11.         filename:"main.[hash].js",
  12.         path:path.resolve(__dirname,"dist")
  13.     },
  14.     module: {
  15.         rules: [
  16.             {
  17.                 test: /\.(sc|c|sa)ss$/,//scss,css,sass
  18.                 use: [
  19.                     MiniCssExtractPlugin.loader,{
  20.                         loader:"css-loader",
  21.                         options:{
  22.                             sourceMap:true
  23.                         }
  24.                 },{
  25.                     loader:"postcss-loader",
  26.                     options:{
  27.                         ident:"postcss",//唯一标识，建议使用postcss
  28.                         sourceMap:true,
  29.                         plugins:(loader)=>[
  30.                             require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//浏览器 份额大于0.15% 在中国 (已经包括IE8了)
  31.                         ]
  32.                     }
  33.                 },{
  34.                     loader:"sass-loader",
  35.                     options:{
  36.                         sourceMap:true
  37.                     }
  38.                 }],
  39.             },
  40.             {
  41.                 test: /\.js$/,
  42.                 loader: 'babel-loader',
  43.                 exclude: /node_modules/
  44.             },
  45.             {//处理图片 路径
  46.                 test:/\.(png|svg|gif|jpg|jpeg)$/,
  47.                 include:[path.resolve(__dirname,'src/')],
  48.                 use:[
  49.                     'file-loader',
  50.                     {
  51.                         loader: 'image-webpack-loader',
  52.                     },
  53.                 ]
  54.             }
  55.         ]
  56.     },
  57.     plugins: [
  58.         new MiniCssExtractPlugin({
  59.             // Options similar to the same options in webpackOptions.output
  60.             // both options are optional
  61.             filename:'[name][hash].css',
  62.             chunkFilename:'[id][hash].css',
  63.         }),
  64.         new HtmlWebpackPlugin({
  65.             title:"webpack 温习",//默认值webpack App
  66.             filename:"main.html",//默认值index.html 是最终生成的文件名字
  67.             template:path.resolve(__dirname,"src/index.html"),
  68.             minify:{
  69.                 collapseWhitespace:true,//是否去空白
  70.                 removeComments:true,//是否移除注释
  71.                 removeAttributeQuotes:true,//移除属性的引号
  72.             }
  73.         }),
  74.         new CleanWebpackPlugin(),//清理构建文件夹
  75.     ],
  76.     optimization:{
  77.         minimizer:[
  78.             new UglifyJsPlugin({
  79.                 cache: true,
  80.                 parallel: true,
  81.                 /**
  82.                  *  sourceMap 和 devtool: 'inline-source-map', 冲突
  83.                  */
  84.                 sourceMap: false, // set to true if you want JS source maps,
  85.                 /**
  86.                  *  extractComments 导出备注
  87.                  */
  88.                 extractComments: 'all'
  89.             }),
  90.             new OptimizeCSSAssetsPlutin({})
  91.         ]
  92.     }
  93.  
  94. }

--------------------------------------------------------------------------------

将图片进一步优化处理 成base64

将图片转化成base64的dataurl的形式，提高页面性能

  1. npm install --save-dev url-loader

我们只需要将file-loader变成url-loader即可：

  1. const path = require("path");
  2. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  3. const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
  4. const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
  5. const HtmlWebpackPlugin = require("html-webpack-plugin");
  6. const {CleanWebpackPlugin} = require('clean-webpack-plugin');
  7. module.exports={
  8.     entry:"./src/index.js",//入口文件
  9.     mode:"production",//模式是开发环境
  10.     output:{//出口文件时main.js，打包到当前目录的dist文件夹下
  11.         filename:"main.[hash].js",
  12.         path:path.resolve(__dirname,"dist")
  13.     },
  14.     module: {
  15.         rules: [
  16.             {
  17.                 test: /\.(sc|c|sa)ss$/,//scss,css,sass
  18.                 use: [
  19.                     MiniCssExtractPlugin.loader,{
  20.                         loader:"css-loader",
  21.                         options:{
  22.                             sourceMap:true
  23.                         }
  24.                 },{
  25.                     loader:"postcss-loader",
  26.                     options:{
  27.                         ident:"postcss",//唯一标识，建议使用postcss
  28.                         sourceMap:true,
  29.                         plugins:(loader)=>[
  30.                             require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//浏览器 份额大于0.15% 在中国 (已经包括IE8了)
  31.                         ]
  32.                     }
  33.                 },{
  34.                     loader:"sass-loader",
  35.                     options:{
  36.                         sourceMap:true
  37.                     }
  38.                 }],
  39.             },
  40.             {
  41.                 test: /\.js$/,
  42.                 loader: 'babel-loader',
  43.                 exclude: /node_modules/
  44.             },
  45.             {//处理图片 路径
  46.                 test:/\.(png|svg|gif|jpg|jpeg)$/,
  47.                 include:[path.resolve(__dirname,'src/')],
  48.                 use:[
  49.                     {
  50.                         loader:'url-loader',
  51.                         options:{//小于10000字节的图片转换成base64格式
  52.                             limit:10000
  53.                         }
  54.                     },
  55.                     {
  56.                         loader: 'image-webpack-loader',
  57.                     },
  58.                 ]
  59.             }
  60.         ]
  61.     },
  62.     plugins: [
  63.         new MiniCssExtractPlugin({
  64.             // Options similar to the same options in webpackOptions.output
  65.             // both options are optional
  66.             filename:'[name][hash].css',
  67.             chunkFilename:'[id][hash].css',
  68.         }),
  69.         new HtmlWebpackPlugin({
  70.             title:"webpack 温习",//默认值webpack App
  71.             filename:"main.html",//默认值index.html 是最终生成的文件名字
  72.             template:path.resolve(__dirname,"src/index.html"),
  73.             minify:{
  74.                 collapseWhitespace:true,//是否去空白
  75.                 removeComments:true,//是否移除注释
  76.                 removeAttributeQuotes:true,//移除属性的引号
  77.             }
  78.         }),
  79.         new CleanWebpackPlugin(),//清理构建文件夹
  80.     ],
  81.     optimization:{
  82.         minimizer:[
  83.             new UglifyJsPlugin({
  84.                 cache: true,
  85.                 parallel: true,
  86.                 /**
  87.                  *  sourceMap 和 devtool: 'inline-source-map', 冲突
  88.                  */
  89.                 sourceMap: false, // set to true if you want JS source maps,
  90.                 /**
  91.                  *  extractComments 导出备注
  92.                  */
  93.                 extractComments: 'all'
  94.             }),
  95.             new OptimizeCSSAssetsPlutin({})
  96.         ]
  97.     }
  98.  
  99. }

----------------------------------------------------------------------------------

如何将不同环境的webpack配置文件合并，将共同配置共用？

  1. npm install --save-dev webpack-merge

首先，我们需要改变配置文件的结构，之前是webpack.config.js和webpack.product.config.js分别充当 开发和生产环境配置，

现在我们分为webpack.common.js、webpack.dev.js、webpack.prod.js  这三个文件分别写着公共配置、开发环境特有配置、生产环境特有配置

下面写出栅格文件的内容：

webpack.common.js:

  1. const path = require("path");
  2. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  3. const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
  4. const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
  5. const HtmlWebpackPlugin = require("html-webpack-plugin");
  6. const {CleanWebpackPlugin} = require('clean-webpack-plugin');
  7. module.exports={
  8.     entry:"./src/index.js",//入口文件
  9.     module: {
  10.         rules: [
  11.             {
  12.                 test: /\.js$/,
  13.                 loader: 'babel-loader',
  14.                 exclude: /node_modules/
  15.             },
  16.             {//处理图片 路径
  17.                 test:/\.(png|svg|gif|jpg|jpeg)$/,
  18.                 include:[path.resolve(__dirname,'src/')],
  19.                 use:[
  20.                     {
  21.                         loader:'url-loader',
  22.                         options:{//小于10000字节的图片转换成base64格式
  23.                             limit:10000
  24.                         }
  25.                     },
  26.                     {
  27.                         loader: 'image-webpack-loader',
  28.                     },
  29.                 ]
  30.             }
  31.         ]
  32.     },
  33.     plugins: [
  34.         new HtmlWebpackPlugin({
  35.             title:"webpack 温习",//默认值webpack App
  36.             filename:"main.html",//默认值index.html 是最终生成的文件名字
  37.             template:path.resolve(__dirname,"src/index.html"),
  38.             minify:{
  39.                 collapseWhitespace:true,//是否去空白
  40.                 removeComments:true,//是否移除注释
  41.                 removeAttributeQuotes:true,//移除属性的引号
  42.             }
  43.         }),
  44.         new CleanWebpackPlugin(),//清理构建文件夹
  45.     ],
  46.  
  47. }

webpack.dev.js:

  1. const path = require("path");
  2. const merge = require('webpack-merge');//引入webpack-merge参数
  3. const common = require('./webpack.common');//将webpack.common.js引入
  4. let devConfig={
  5.     mode:"development",//模式是开发环境
  6.     output:{//出口文件时main.js，打包到当前目录的dist文件夹下
  7.         filename:"main.js",
  8.         path:path.resolve(__dirname,"dist")
  9.     },
  10.     module: {
  11.         rules: [
  12.             {
  13.                 test: /\.(sc|c|sa)ss$/,//scss,css,sass
  14.                 use: ["style-loader",{
  15.                         loader:"css-loader",
  16.                         options:{
  17.                             sourceMap:true
  18.                         }
  19.                 },{
  20.                     loader:"postcss-loader",
  21.                     options:{
  22.                         ident:"postcss",//唯一标识，建议使用postcss
  23.                         sourceMap:true,
  24.                         plugins:(loader)=>[
  25.                             require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//浏览器 份额大于0.15% 在中国 (已经包括IE8了)
  26.                         ]
  27.                     }
  28.                 },{
  29.                     loader:"sass-loader",
  30.                     options:{
  31.                         sourceMap:true
  32.                     }
  33.                 }],
  34.             }
  35.         ]
  36.     }
  37. }
  38.  
  39. module.exports=merge(common,devConfig);//第一个参数是基本配置 后面的参数是当前配置

webpack.prod.js:

  1. const path = require("path");
  2. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  3. const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
  4. const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
  5. const HtmlWebpackPlugin = require("html-webpack-plugin");
  6. const {CleanWebpackPlugin} = require('clean-webpack-plugin');
  7. const merge = require('webpack-merge');//引入webpack-merge参数
  8. const common = require('./webpack.common');//将webpack.common.js引入
  9. let prodConfig={
  10.     mode:"production",//模式是开发环境
  11.     output:{//出口文件时main.js，打包到当前目录的dist文件夹下
  12.         filename:"main.[hash].js",
  13.         path:path.resolve(__dirname,"dist")
  14.     },
  15.     module: {
  16.         rules: [
  17.             {
  18.                 test: /\.(sc|c|sa)ss$/,//scss,css,sass
  19.                 use: [
  20.                     MiniCssExtractPlugin.loader,{
  21.                         loader:"css-loader",
  22.                         options:{
  23.                             sourceMap:true
  24.                         }
  25.                 },{
  26.                     loader:"postcss-loader",
  27.                     options:{
  28.                         ident:"postcss",//唯一标识，建议使用postcss
  29.                         sourceMap:true,
  30.                         plugins:(loader)=>[
  31.                             require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//浏览器 份额大于0.15% 在中国 (已经包括IE8了)
  32.                         ]
  33.                     }
  34.                 },{
  35.                     loader:"sass-loader",
  36.                     options:{
  37.                         sourceMap:true
  38.                     }
  39.                 }],
  40.             },
  41.             {
  42.                 test: /\.js$/,
  43.                 loader: 'babel-loader',
  44.                 exclude: /node_modules/
  45.             },
  46.  
  47.         ]
  48.     },
  49.     plugins: [
  50.         new MiniCssExtractPlugin({
  51.             // Options similar to the same options in webpackOptions.output
  52.             // both options are optional
  53.             filename:'[name][hash].css',
  54.             chunkFilename:'[id][hash].css',
  55.         }),
  56.     ],
  57.     optimization:{
  58.         minimizer:[
  59.             new UglifyJsPlugin({
  60.                 cache: true,
  61.                 parallel: true,
  62.                 /**
  63.                  *  sourceMap 和 devtool: 'inline-source-map', 冲突
  64.                  */
  65.                 sourceMap: false, // set to true if you want JS source maps,
  66.                 /**
  67.                  *  extractComments 导出备注
  68.                  */
  69.                 extractComments: 'all'
  70.             }),
  71.             new OptimizeCSSAssetsPlutin({})
  72.         ]
  73.     }
  74.  
  75. }
  76.  
  77. module.exports=merge(common,prodConfig);

还有在package.json中记得把执行命令的--config改一下

  1. {
  2.   "name": "webpack1",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "test": "echo \"Error: no test specified\" && exit 1",
  8.     "build": "npx webpack --config webpack.dev.js",
  9.     "dist": "npx webpack --config webpack.prod.js"
  10.   },
  11.   "keywords": [],
  12.   "author": "",
  13.   "license": "ISC",
  14.   "devDependencies": {
  15.     "@babel/core": "^7.6.0",
  16.     "@babel/plugin-transform-runtime": "^7.6.0",
  17.     "@babel/preset-env": "^7.6.0",
  18.     "@babel/runtime-corejs2": "^7.6.0",
  19.     "autoprefixer": "^9.6.1",
  20.     "babel-loader": "^8.0.6",
  21.     "clean-webpack-plugin": "^3.0.0",
  22.     "css-loader": "^3.2.0",
  23.     "file-loader": "^4.2.0",
  24.     "html-webpack-plugin": "^3.2.0",
  25.     "image-webpack-loader": "^6.0.0",
  26.     "mini-css-extract-plugin": "^0.8.0",
  27.     "node-sass": "^4.12.0",
  28.     "optimize-css-assets-webpack-plugin": "^5.0.3",
  29.     "postcss-loader": "^3.0.0",
  30.     "sass-loader": "^8.0.0",
  31.     "style-loader": "^1.0.0",
  32.     "uglifyjs-webpack-plugin": "^2.2.0",
  33.     "url-loader": "^2.1.0",
  34.     "webpack": "^4.39.3",
  35.     "webpack-cli": "^3.3.8",
  36.     "webpack-merge": "^4.2.2"
  37.   },
  38.   "dependencies": {
  39.     "@babel/polyfill": "^7.6.0",
  40.     "@babel/runtime": "^7.6.0",
  41.     "lodash": "^4.17.15"
  42.   }
  43. }

------------------------------------------------------------------------------------------------------------------------------

js启用sourcemap

webpack4默认可以启用sourcemap

只需要在config文件中加上：(这个通常放在开发环境中)

  1. devtool:'inline-source-map'

这样在开发环境下，就可以看到执行的js具体是在哪个文件下的第几行执行的

-----------------------------------------------------------------------------------------------------------------

监控文件变化，启用watch，当代码发生变化时，自动编译，自动打包

在webpack启动的时候 加上一个 --watch命令

  1. "scripts": {
  2.     "test": "echo \"Error: no test specified\" && exit 1",
  3.     "build": "npx webpack --watch --config webpack.dev.js",
  4.     "dist": "npx webpack --config webpack.prod.js"
  5.   },

-------------------------------------------------------------------------------------------------------------------

webpack-dev-server和热更新

webpack-dev-server提供了一个Web服务器，能够实加载，它内置了webpack的编译功能，是直接编译在内存里，而不是编译在dist文件里，

先安装webpack-dev-server

  1. npm install --save-dev webpack-dev-server

在webpack.dev.js：

  1. const path = require("path");
  2. const merge = require('webpack-merge');//引入webpack-merge参数
  3. const common = require('./webpack.common');//将webpack.common.js引入
  4. const webpack = require('webpack');
  5. let devConfig={
  6.     mode:"development",//模式是开发环境
  7.     devtool:'inline-source-map',//开启sourcemap  方便js调试
  8.     output:{//出口文件时main.js，打包到当前目录的dist文件夹下
  9.         filename:"main.js",
  10.         path:path.resolve(__dirname,"dist")
  11.     },
  12.     devServer: {
  13.         contentBase: path.join(__dirname,"dist"), //告诉服务器 哪里提供内容，默认情况下将使用当前工作目录作为提供内容的目录
  14.         port: 8080, //端口号设为8080, 默认也是8080
  15.         clientLogLevel:'warning',//可能的值none、error、warning、info(默认值)
  16.         hot:true,//启用webpack的模块热替换特性，这个需要配合webpack.HotModuleReplacementPlugin插件
  17.         compress:true,//一切服务都启用gzip压缩
  18.         host:'localhost',//指定使用一个host，默认是localhost，如果你希望服务器外部可访问0.0.0.0
  19.         open:true,//是否打开浏览器
  20.         overlay:{//出现错误或者警告的时候，是否覆盖页面线上错误消息
  21.             warnings:true,
  22.             errors:true
  23.         },
  24.         publicPath:'/',//此路径下的打包文件 可在浏览器上访问
  25.         proxy:{
  26.             "/api":{
  27.                 target:"http://192.168.0.102:8080",
  28.                 pathRewrite:{
  29.                     "^/api":"/mockjsdata/5/api",
  30.                     // /api/getuser => http://192.168.0.102:8080/mockjsdata/5/api/getuser
  31.                 }
  32.             }
  33.         },
  34.         quiet:true,//启动quiet后，除了初始启动信息之外的任何内容都不会显示
  35.         watchOptions:{//监视文件相关控制选项
  36.             poll:true,//webpack使用文件系统（file system）获取文件改动的通知，在某些情况下不会正常工作
  37.             ignored:/node_modules/,//忽略监控的文件夹，正则
  38.             aggregateTimeout:300,//默认值，当第一个文件改变，会在重新构建前增加延迟
  39.  
  40.         }
  41.     },
  42.     module: {
  43.         rules: [
  44.             {
  45.                 test: /\.(sc|c|sa)ss$/,//scss,css,sass
  46.                 use: ["style-loader",{
  47.                         loader:"css-loader",
  48.                         options:{
  49.                             sourceMap:true
  50.                         }
  51.                 },{
  52.                     loader:"postcss-loader",
  53.                     options:{
  54.                         ident:"postcss",//唯一标识，建议使用postcss
  55.                         sourceMap:true,
  56.                         plugins:(loader)=>[
  57.                             require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//浏览器 份额大于0.15% 在中国 (已经包括IE8了)
  58.                         ]
  59.                     }
  60.                 },{
  61.                     loader:"sass-loader",
  62.                     options:{
  63.                         sourceMap:true
  64.                     }
  65.                 }],
  66.             }
  67.         ]
  68.     },
  69.     plugins:[
  70.         new webpack.NamedModulesPlugin(),//更容易查看path 的估值
  71.         new webpack.HotModuleReplacementPlugin(),//替换插件
  72.  
  73.     ]
  74. }
  75.  
  76. module.exports=merge(common,devConfig);//第一个参数是基本配置 后面的参数是当前配置

之后执行 npx webpack-dev-server --config webpack.dev.js  就会打开服务器，另外需要注意的是，webpack-dev-server内置了webpack的打包功能，但是它时打包到了内存中，而不是dist文件中

当然每次这样执行命令太长了，就把它加到script的命令中：

  1. "start": "npx webpack-dev-server --config webpack.dev.js"

-------------------------------------------------------------------------------------------------------------

babel优化

js启用babel转码：es6转化为es5

安装

  1. npm i -D babel-loader babel-core babel-preset-env

在公共webpack.common.js中添加：

  1. module: {
  2.         rules: [
  3.             {
　　　　　　　　　 test: /\.js$/,
                exclude: /node_modules/,
                use:{
                    loader: 'babel-loader',
                    options:{
                        cacheDirectory:true,//开启缓存 加快babel转码
                    }
                }
  1.             },
  2.  
  3.         ]
  4.     },

记得在根目录下创建一个.babelrc文件

  1. {
  2.     "presets": ["@babel/env"]
  3. }

----------------------------------

另外 我们在项目中可能在多个模块中重复引用同个文件，这样当babel转码时会一次性将这些重复文件都转码过去，造成文件体积变大，此时需要用到插件，将这些公共的文件提取出来。

  1. npm install babel-plugin-transform-runtime --save-dev
  1. npm install babel-runtime --save

在.babelrc中配置：

  1. {
  2.     "presets": ["@babel/env"]
  3. }

------------------------------------------------------------------------------------------

eslint校验：

安装：

  1. npm install eslint  --save-dev
  1. npm install eslint-loader --save-dev

以下是用到的额外的需要安装的eslint的解释器、校验规则等

  1. npm i -D babel-eslint standard

在common.js中增加配置

  1. const path = require("path");
  2. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  3. const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
  4. const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
  5. const HtmlWebpackPlugin = require("html-webpack-plugin");
  6. const {CleanWebpackPlugin} = require('clean-webpack-plugin');
  7. module.exports={
  8.     entry:"./src/index.js",//入口文件
  9.     module: {
  10.         rules: [
  11.             {
  12.                 test: /\.js$/,
  13.                 exclude: /node_modules/,
  14.                 use:[{
  15.                     loader: 'babel-loader',
  16.                     options:{
  17.                         cacheDirectory:true,//开启缓存 加快babel转码
  18.                     }
  19.                 },{//一定要放在下面  先执行eslint检测 再转义  因为webpack是从后往前执行的
  20.                     loader:'eslint-loader',
  21.                     options:{
  22.                         fix:true,//如有语法错误 自动修复
  23.                     }
  24.                 }]
  25.             },
  26.             {//处理图片 路径
  27.                 test:/\.(png|svg|gif|jpg|jpeg)$/,
  28.                 include:[path.resolve(__dirname,'src/')],
  29.                 use:[
  30.                     {
  31.                         loader:'url-loader',
  32.                         options:{//小于10000字节的图片转换成base64格式
  33.                             limit:10000
  34.                         }
  35.                     },
  36.                     {
  37.                         loader: 'image-webpack-loader',
  38.                     },
  39.                 ]
  40.             }
  41.         ]
  42.     },
  43.     plugins: [
  44.         new HtmlWebpackPlugin({
  45.             title:"webpack 温习",//默认值webpack App
  46.             filename:"main.html",//默认值index.html 是最终生成的文件名字
  47.             template:path.resolve(__dirname,"src/index.html"),
  48.             minify:{
  49.                 collapseWhitespace:true,//是否去空白
  50.                 removeComments:true,//是否移除注释
  51.                 removeAttributeQuotes:true,//移除属性的引号
  52.             }
  53.         }),
  54.         new CleanWebpackPlugin(),//清理构建文件夹
  55.     ],
  56.  
  57. }

在跟目录添加.eslintrc.js文件

  1. module.exports={
  2.     root:true,//是不是我们的根目录
  3.     parserOptions: {
  4.         parser:'babel-eslint'
  5.     },
  6.     env:{
  7.         browser:true,
  8.     },
  9.     extends:[
  10.         'standard'
  11.     ],
  12.     globals:{
  13.         NODE_ENV:false
  14.     },
  15.     rules:{
  16.         'generator-star-spacing':'off',
  17.         'no-debugger': process.env.NODE_ENV === 'production' ? 'error':'off',
  18.         //添加分号 必须
  19.         'semi':['error','always'],
  20.         'no-unexpected-multiline':'off',
  21.         'space-before-function-paren':['error','never'],
  22.         'quotes':[
  23.             'error',
  24.             'single',
  25.             {
  26.                 'avoidEscape':true
  27.             }
  28.         ]
  29.     }
  30. }

在根目录加.eslintignore文件

  1. /dist/
  2. /node-modules/
  3. /*.js

--------------------------------------------------------------------------------------------

resolve解析，当我们引入一个文件时，比如import _ from './src/dev.js'

我们可以将路径配置一个别名，方便引入模块

在common.js中可以加一条配置：

  1. const path = require("path");
  2. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  3. const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
  4. const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
  5. const HtmlWebpackPlugin = require("html-webpack-plugin");
  6. const {CleanWebpackPlugin} = require('clean-webpack-plugin');
  7. module.exports={
  8.     entry:"./src/index.js",//入口文件
  9.     resolve:{
  10.         alias:{
  11.             '@':path.resolve(__dirname,'src/')
  12.         },
  13.         extensions:[".js",".vue",".json"],//默认.js  .json
  14.     },
  15.     module: {
  16.         rules: [
  17.             {
  18.                 test: /\.js$/,
  19.                 exclude: /node_modules/,
  20.                 use:[{
  21.                     loader: 'babel-loader',
  22.                     options:{
  23.                         cacheDirectory:true,//开启缓存 加快babel转码
  24.                     }
  25.                 },{//一定要放在下面  先执行eslint检测 再转义  因为webpack是从后往前执行的
  26.                     loader:'eslint-loader',
  27.                     options:{
  28.                         fix:true,//如有语法错误 自动修复
  29.                     }
  30.                 }]
  31.             },
  32.             {//处理图片 路径
  33.                 test:/\.(png|svg|gif|jpg|jpeg)$/,
  34.                 include:[path.resolve(__dirname,'src/')],
  35.                 use:[
  36.                     {
  37.                         loader:'url-loader',
  38.                         options:{//小于10000字节的图片转换成base64格式
  39.                             limit:10000
  40.                         }
  41.                     },
  42.                     {
  43.                         loader: 'image-webpack-loader',
  44.                     },
  45.                 ]
  46.             }
  47.         ]
  48.     },
  49.     plugins: [
  50.         new HtmlWebpackPlugin({
  51.             title:"webpack 温习",//默认值webpack App
  52.             filename:"main.html",//默认值index.html 是最终生成的文件名字
  53.             template:path.resolve(__dirname,"src/index.html"),
  54.             minify:{
  55.                 collapseWhitespace:true,//是否去空白
  56.                 removeComments:true,//是否移除注释
  57.                 removeAttributeQuotes:true,//移除属性的引号
  58.             }
  59.         }),
  60.         new CleanWebpackPlugin(),//清理构建文件夹
  61.     ],
  62.  
  63. }

---------------------------------------------------------------------------------

webpack 配置外部拓展（externals）     cdn也可以全局引入

在common.js中再增加一个配置  已引入jquery为例

  1. externals:{
  2.         jquery:"jQuery",//写法有多种可以查一下
  3.     },

这样就可以在main,js中import $ from 'jquery'  来全局引入jquery   另外这样做有个好处就是 jquery不会打包到bundle里去  大大减少文件体积

-----------------------------------------------------------------------------------------

如何让webpack打包后生成分析报表

安装

  1. npm install --save-dev webpack-bundle-analyzer

在dev.js中配置

  1. const path = require("path");
  2. const merge = require('webpack-merge');//引入webpack-merge参数
  3. const common = require('./webpack.common');//将webpack.common.js引入
  4. const webpack = require('webpack');
  5. const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  6. let devConfig={
  7.     mode:"development",//模式是开发环境
  8.     devtool:'inline-source-map',//开启sourcemap  方便js调试
  9.     output:{//出口文件时main.js，打包到当前目录的dist文件夹下
  10.         filename:"main.js",
  11.         path:path.resolve(__dirname,"dist")
  12.     },
  13.     devServer: {
  14.         contentBase: path.join(__dirname,"dist"), //告诉服务器 哪里提供内容，默认情况下将使用当前工作目录作为提供内容的目录
  15.         port: 8080, //端口号设为8080, 默认也是8080
  16.         clientLogLevel:'warning',//可能的值none、error、warning、info(默认值)
  17.         hot:true,//启用webpack的模块热替换特性，这个需要配合webpack.HotModuleReplacementPlugin插件
  18.         compress:true,//一切服务都启用gzip压缩
  19.         host:'localhost',//指定使用一个host，默认是localhost，如果你希望服务器外部可访问0.0.0.0
  20.         open:true,//是否打开浏览器
  21.         overlay:{//出现错误或者警告的时候，是否覆盖页面线上错误消息
  22.             warnings:true,
  23.             errors:true
  24.         },
  25.         publicPath:'/',//此路径下的打包文件 可在浏览器上访问
  26.         proxy:{
  27.             "/api":{
  28.                 target:"http://192.168.0.102:8080",
  29.                 pathRewrite:{
  30.                     "^/api":"/mockjsdata/5/api",
  31.                     // /api/getuser => http://192.168.0.102:8080/mockjsdata/5/api/getuser
  32.                 }
  33.             }
  34.         },
  35.         quiet:true,//启动quiet后，除了初始启动信息之外的任何内容都不会显示
  36.         watchOptions:{//监视文件相关控制选项
  37.             poll:true,//webpack使用文件系统（file system）获取文件改动的通知，在某些情况下不会正常工作
  38.             ignored:/node_modules/,//忽略监控的文件夹，正则
  39.             aggregateTimeout:300,//默认值，当第一个文件改变，会在重新构建前增加延迟
  40.  
  41.         }
  42.     },
  43.     module: {
  44.         rules: [
  45.             {
  46.                 test: /\.(sc|c|sa)ss$/,//scss,css,sass
  47.                 use: ["style-loader",{
  48.                         loader:"css-loader",
  49.                         options:{
  50.                             sourceMap:true
  51.                         }
  52.                 },{
  53.                     loader:"postcss-loader",
  54.                     options:{
  55.                         ident:"postcss",//唯一标识，建议使用postcss
  56.                         sourceMap:true,
  57.                         plugins:(loader)=>[
  58.                             require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//浏览器 份额大于0.15% 在中国 (已经包括IE8了)
  59.                         ]
  60.                     }
  61.                 },{
  62.                     loader:"sass-loader",
  63.                     options:{
  64.                         sourceMap:true
  65.                     }
  66.                 }],
  67.             }
  68.         ]
  69.     },
  70.     plugins:[
  71.         new webpack.NamedModulesPlugin(),//更容易查看path 的估值
  72.         new webpack.HotModuleReplacementPlugin(),//替换插件
  73.         new BundleAnalyzerPlugin(),//生成打包报表
  74.     ]
  75. }
  76.  
  77. module.exports=merge(common,devConfig);//第一个参数是基本配置 后面的参数是当前配置

然后 打包一下，就会出现报表

webpack4温习总结的更多相关文章

  1. 前端框架 EasyUI （0） 重新温习（序言）

    几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...

  2. PowerDesigner将PDM导出生成WORD文档--温习老知识

    转:http://www.cnblogs.com/wudiwushen/archive/2010/05/13/1734812.html 今天的温习老知识,是如何将一个PD设计的PDM来导出WORD文档 ...

  3. mini-css-extract-plugin 的用法（webpack4）

    今天在使用webpack的extract-text-webpack-plugin插件提取单独打包css文件时,报错,说是这个插件要依赖webpack3的版本. 后面查了一下,webpack4得使用mi ...

  4. webpack4: compilation.mainTemplate.applyPluginsWaterfall is not a function 解决方法

    今天捣鼓webpack4踩到一个弥天大坑:使用html-webpack-plugin打包html的时候一直报 compilation.mainTemplate.applyPluginsWaterfal ...

  5. webpack4新特性介绍

    导语: webpack是一个JS应用打包器, 它将应用中的各个模块打成一个或者多个bundle文件.借助loaders和plugins,它可以改变.压缩和优化各种各样的文件.它的输入是不同的资源,比如 ...

  6. R数据分析 第一篇：温习概率论

    概率论是人们在长期实践中发现的理论,是客观存在的.自然界和社会上发生的现象是多种多样的,有一类现象,在一定条件下必然发生,称作确定性现象,而概率论研究的现象是不确定性现象,嗯嗯,醒醒,概率论研究的对象 ...

  7. webpack4.1.1的使用详细教程

    安装全局webpack cnpm install -g webpack 安装全局webpack-cli npm install -g webpack-cli 初始化:生成package.json文件 ...

  8. webpack4.x配置详解，多页面，多入口，多出口，新特性新坑！！

    花了差不多一天多的时间,重新撸了一遍webpack4.x的常用配置. 基本上常用的配置都熟悉了一遍,总体上来讲,为了对parcel进行反击,webpack从4.x开始,正在朝着尽可能的简化配置文件的方 ...

  9. webpack4 splitChunksPlugin && runtimeChunkPlugin 配置杂记

    webpack2 还没研究好,就发现升级到4了,你咋这么快~ 最近要做项目脚手架,项目构建准备重新做,因为之前写的太烂了...然后发现webpack大版本已经升到4了(又去看了一眼,4.5了),这么快 ...

随机推荐

  1. webpack 3.1 升级webpack 4.0

    webpack 3.1 升级webpack 4.0 为了提升打包速度以及跟上主流技术步伐,前段时间把项目的webpack 升级到4.0版本以上 webpack 官网:https://webpack.j ...

  2. Vuex 刷新后数据丢失问题 Typescript

    问题描述:Vuex保存的数据在页面刷新后会全部丢失清除 问题解决方案:使用sessionstorage进行保存,在页面刷新时保存至sessionStorage,页面在加载时再进行填充   (另有vue ...

  3. 关键字：__thread & pthread_key_t

    在说__thread之前,先来看看pthread_ket_t吧. 参考:http://blog.csdn.net/lmh12506/article/details/8452700 上面的博文说的比较通 ...

  4. EntityFramework进阶（四）- 实现批量新增

    本系列原创博客代码已在EntityFramework6.0.0测试通过,转载请标明出处 我们可以结合Ado.Net的SqlBulkCopy实现SqlServer数据库的批量新增,其他类型的数据库的批量 ...

  5. Modelsim问题集锦

    前言 收集工程调试中遇到的modelsim问题. 问题 (1)仿真发现时钟信号和理论上的数据信号没有边沿对齐. 解决:一般是时钟精度不匹配的问题. 如果想要1ns的精度则代码中的精度需设置为: v语法 ...

  6. python运行出现TypeError: super() takes at least 1 argument (0 given)错误

    在写继承子类的时候出现了TypeError: super() takes at least 1 argument (0 given)的error: 源代码(python3中完美可运行): class ...

  7. MongoDB的删除操作

    1.MongoDB 删除数据库的语法格式如下:  db.dropDatabase() > show dbs admin .000GB config .000GB local .000GB sda ...

  8. linux7 上安装mongodb4.2.1操作步骤

    MongoDB是一个通用的.基于文档的分布式数据库,它是为现代应用程序开发人员和云时代而构建的.没有数据库能让你更有效率. 1.下载需要的软件包https://www.mongodb.com/down ...

  9. Mysql语句练习记录

    使用的sql图形软件:SQLyogEnt 使用的数据库:MYSQL5.7 软件地址: 链接:https://pan.baidu.com/s/1lajyXaSnmrO1v5v987NOoA 提取码:i3 ...

  10. Manjaro安装mysql-5.7折腾小记

    安装前准备: 现在Arch官方源是MariaDB,所以得从mysql官网下载,地址:https://www.mysql.com/downloads/ 选择一个合适的版本下载: 下载下来先将压缩文件解压 ...