一周精通Vue（四）webpack-Plugin
webpack-Plugin 版权plugin plugins: [ new webpack.BannerPlugin("author: 清水云") ] html-webpack-plugin # 配置打包HTML文件 # 安装插件 npm install html-webpack-plugin --save-dev # 配置plugin plugins: [ new webpack.BannerPlugin("author: 清水云"), new HtmlWebpackPlugin({ template: 'index.html' }) ] uglifyjs-webpack-plugin # 安装插件 npm install uglifyjs-webpack-plugin@1.1.1 --save-dev plugins: [ new webpack.BannerPlugin("author: 清水云"), new HtmlWebpackPlugin({ template: 'index.html' }), new UglifyjsWebpackPlugin() ] # 配置后打包可以将打包后的js压缩 webpack-dev-server # 安装插件 内存打包 页面实时监听刷新 npm install --save-dev webpack-dev-server@2.9.3 # 配置插件 // 开发内存实时加载文件服务 devServer: { // 服务于那个文件件 contentBase: './dist', // 实时监听 inline: true, // 指定端口 port: 23333, } 通过命令 启动 npm run dev "dev": "webpack-dev-server --open" webpack-merge 安装 可以合并配置config.js文件 npm install webpack-merge 配置文件分离与merge 把 webpack.config.js改成三个文件 // file: base.config.js const path = require('path'); module.exports = { // 打包入口文件 entry: './src/main.js', // 出口文件 output: { // 出口文件绝对路径 path: path.resolve(__dirname, '../dist'), // 打包后的文件名字 filename: 'bundle.js', // 打包时动态修改文件加载地址 // publicPath: 'dist/' }, module: { rules: [ { test: /\.css$/i, // css-loader 只负责将css文件加载 // style-loader 负责将样式添加到dom中 // 这里配置顺序需要注意 是从后向前加载的 use: ['style-loader', 'css-loader'], }, { test: /\.less$/, use: [ { loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "less-loader" // compiles Less to CSS } ] }, { test: /\.(png|jpg|gif|jpeg)$/, use: [ { loader: 'url-loader', options: { // 当加载图片时 文件大小 小于limit时 会将图片编译成base64字符串形式 // 当加载图片时 文件大小 大于limit时 需要使用file-loader模块进行加载 limit: 9999, // 打包后文件的命名规则 // [name] 文件打包前的名字 // [hash:8] 截取8位hash值 // [ext] 扩展名 name: 'img/[name].[hash:8].[ext]' }, } ] }, { test: /\.js$/, // exclude 转换的时候排除的内容 exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['es2015'] } } }, { test: /\.vue$/, // vueloader use: ['vue-loader'] } ], }, resolve: { alias: { // 指定 在其他地方导入vue的时候 vue来自哪里 // 在node_modules/vue/dist/ 中 默认是 vue.runtime.esm.js 修改为 vue.esm.js 'vue$': 'vue/dist/vue.esm.js' } }, }; // file:dev.config.js const WebpackMerge = require('webpack-merge'); const baseConfig = require('./base.config'); // 合并配置文件 module.exports = WebpackMerge(baseConfig, { // 开发内存实时加载文件服务 devServer: { // 服务于那个文件件 contentBase: './dist', // 实时监听 inline: true, // 指定端口 port: 23333, } }); // file: prod.config.js const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin') const WebpackMerge = require('webpack-merge'); const baseConfig = require('./base.config'); // 合并配置文件 module.exports = WebpackMerge(baseConfig, { plugins: [ new UglifyjsWebpackPlugin() ], }); 最后在package.json 中指定加载配置文件 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config ./build/prod.config.js", "dev": "webpack-dev-server --open --config ./build/dev.config.js" },
