Webpack学习笔记（三） —— 相关功能完善

打包后的js和css自动注入到html中

1. 安装html-webpack-plugin
npm install --save-dev html-webpack-plugin
2. webpack.config.js文件新增

   	var HtmlWebpackPlugin = require('html-webpack-plugin');
   	module.exports = {
   	  plugins: [new HtmlWebpackPlugin()]
   	};
   

清理dist目录插件

1. 安装clean-webpack-plugin
npm install --save-dev clean-webpack-plugin
2. webpack.config.js文件新增

   	const { CleanWebpackPlugin } = require('clean-webpack-plugin');
   	module.exports = {
   	    plugins: [
   	        new CleanWebpackPlugin(),
   	     ],
   	  };
   

实现调试看见css文件名

1. webpack.config.js文件中module.exports对象中module ——> rules 中css的打包规则，更改为

   	module:{
   	      rules:[       
   	          {
   	            test:/\.css$/,
   	            use:[
   	                'style-loader',
   	                {
   	                    loader:'css-loader',
   	                    options:{
   	                    sourceeMap:true
   	                    }
   	                }
   	            ]
   	        }
   	    ]
   	}
   

实现调试看见css源文件位置及sass添加css3前缀

1. 安装postcss-loader和autoprefixer
npm i -D postcss-loader
npm i autoprefixer --save-dev
2. webpack.config.js文件中module.exports对象中module ——> rules 中css的打包规则，更改为

   	module:{
   	      rules:[
   	        //   用style-loader和css-loader处理css文件
   	          {
   	            test:/\.(c|sc|sa)ss$/,
   	            use:[
   	              'style-loader',
   	              {
   	                loader:'css-loader',
   	                options:{
   	                  sourceMap:true
   	                }
   	              },
   	              {
   	                loader: 'postcss-loader',
   	                options: {
   	                  ident: 'postcss',
   	                  sourceMap:true,
   	                  plugins: [
   	                    require('autoprefixer')({browsers:['> 0.15% in CN']})
   	                    
   	                  ]
   	                }
   	              },
   	              {
   	                loader:"sass-loader",
   	                options:{
   	                  sourceMap:true
   	                }
   	              }
   	            ]
   	          }  
   	      ]
   	  }
   

查看js源文件，便于调试

1. webpack.config.js文件

   	module.exports={
   	  // 不建议用于生产环境
   	  devtool:"inline-source-map",
   	}
   

启动监控自动编译

1. 在package.json文件中scripts脚本中修改增加

   "watch":"npx webpack --watch --config webpack.dev.js"
   

启动自动编译自动更新

1. 安装webpack-dev-server --save-dev
npm install webpack-dev-server --save-dev
2. 在package.json文件中scripts脚本中修改增加

   // npm run start 启动
   "start": "webpack-dev-server --open --config webpack.dev.js"
   

3. webpack.config.js文件

   module.exports={
     // 不建议用于生产环境，更多功能查看webpack相关文档
    devServer: {
     contentBase: './dist',
    },
   }