前端 webpack 4 打包工具 (2)

插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。 Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用

使用某个插件，需要通过npm进行安装，然后在webpack.config.js配置文件的plugins(是一个数组)配置项中添加该插件的实例

//安装uglifyjs-webpack-plugin js代码压缩插件 npm install uglifyjs-webpack-plugin --save-dev //引入插件 const uglify = require(\'uglifyjs-webpack-plugin\'); ​ ​ //配置插件 plugins:[        new uglify()   ]

自动引入资源插件：

//安装html-webpack-plugin插件 npm i html-webpack-plugin@3.2.0 -D //引入插件 const HtmlWebpackPlugin = require(\'html-webpack-plugin\'); plugins: [        new uglify(),        new HtmlWebpackPlugin({            template: path.join(__dirname, "/src/index.html")// new一个这个插件的实例，并传入相关的参数       })   ] 六、开发配置

通过webpack-dev-server的选项，能够用多种方式改变默认行为：

npm i webpack-dev-server@3.11.2 -D

webpack.config.js

var path = require(\'path\'); ​ module.exports = {  //...  devServer: {    contentBase: path.join(__dirname, \'dist\'),//项目目录    compress: true, // gzip 压缩    port: 9000 //服务端口    host: \'0.0.0.0\', //ip地址    hot: true,//热更新 需要webpack.HotModuleReplacementPlugin 插件    https: true,//开启https    open: true,//启动后自动打开浏览器    proxy: {//代理      \'/api\': {//\'/api\'开始的请求会被代理        target: \'http://localhost:3000\',//代理地址        pathRewrite: {\'^/api\' : \'\'}//替换接口种\'/api\'字符串     }   } } }; 七、环境变量

webpack 命令行 环境配置 的 --env 参数，可以允许你传入任意数量的环境变量。而在 webpack.config.js 中可以访问到这些环境变量。例如，--env.production 或 --env.NODE_ENV=local（NODE_ENV 通常约定用于定义环境类型）

webpack --env.NODE_ENV=local --env.production --progress const path = require(\'path\'); ​ module.exports = env => {  // Use env.<YOUR VARIABLE> here:  console.log(\'NODE_ENV: \', env.NODE_ENV); // \'local\'  console.log(\'Production: \', env.production); // true ​  return {    entry: \'./src/index.js\',    output: {      filename: \'bundle.js\',      path: path.resolve(__dirname, \'dist\')   } }; }; 八、vue、webpack配置 "dependencies": {    "vue": "^2.6.14",    "vue-loader": "^15.9.6",    "vue-template-compiler": "^2.6.14",    "webpack": "^4.0.0",    "webpack-cli": "^3.3.12" },  "devDependencies": {    "css-loader": "^2.1.1",    "html-webpack-plugin": "^3.2.0",    "style-loader": "^0.23.1",    "uglifyjs-webpack-plugin": "^2.2.0",    "webpack-dev-server": "^3.11.2" }, const path = require(\'path\') const HtmlWebpackPlugin = require(\'html-webpack-plugin\'); const VueLoaderPlugin = require(\'vue-loader/lib/plugin\'); module.exports={ entry:\'./index.js\', output:{ path:path.resolve(__dirname,\'dist\'), filename:\'index.js\' }, module:{ rules:[ { test:/\.css/, use:[\'style-loader\',\'css-loader\'] }, { test:/\.vue/, use:[\'vue-loader\'] } ] }, plugins:[ new VueLoaderPlugin(), new HtmlWebpackPlugin({ template: path.join(__dirname, "./index.html")// new一个这个插件的实例，并传入相关的参数 }) ], devServer:{ port:9000, hot:true, open:true } }