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',
    },
   }
   

設置代理服務器

1. webpack.config.js文件中

   // 請求地址是http://rap2.taobao.org/repository/editor?id=241104
   // 發送請求時的編寫
   /*
   	 axios.get('api/test').then(res=>{
   	     console.log(res)
   	 })
   */
   module.exports={
   	devServer: {
           contentBase: './dist',
           proxy: {
             '/api': {
               target: 'http://rap2.taobao.org:38080',
               pathRewrite: {'^/api' : '/app/mock/241104/vpi'}
             }
           }
       },
   }