webpack前端自动化构建工具
博主不易，不求赞赏，希望把自己遇到的难点写出来，以及希望自己能有能力写出一篇不错的博文。
前端构建工具本人 bootstrap+jquery用gulp
vue+element 用webpack
本人最近写的一个vue项目的目录结构
一：package.json
{ "name": "szhong", "version": "1.0.0", "description": "这是三中建材官网", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --progress --config webpack.config.dev.js --port 6008 --open --hot", "build": "webpack --progress --config webpack.config.prod.js" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "axios": "^0.18.0", "element-ui": "^2.3.4", "iview": "^2.13.0", "jquery": "^3.3.1", "v-distpicker": "^1.0.16", "vue": "^2.5.16", "vue-lazyload": "^1.2.3", "vue-router": "^3.0.1", "moment": "^2.22.1", "vuex": "^3.0.1" }, "devDependencies": { "babel-core": "^6.26.2", "babel-loader": "^7.1.4", "babel-plugin-component": "^1.1.0", "babel-plugin-import": "^1.7.0", "babel-plugin-syntax-dynamic-import": "^6.18.0", "babel-preset-env": "^1.6.1", "clean-webpack-plugin": "^0.1.19", "css-loader": "^0.28.11", "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^1.1.11", "html-webpack-plugin": "^3.2.0", "style-loader": "^0.20.3", "url-loader": "^1.0.1", "vue-loader": "^14.2.2", "vue-template-compiler": "^2.5.16", "webpack": "^3.11.0", "webpack-dev-server": "^2.11.2" } }
二：webpack.config.dev.js
const HtmlWebpackPlugin = require('html-webpack-plugin') const webpack = require('webpack') module.exports = { entry: './src/main.js',//入口 module: { rules: [ { test: /\.vue$/, use: ['vue-loader'] }, { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.(ttf|eot|woff|svg|jpg|png|gif)$/, use: [ { loader: 'url-loader' } ] } ] }, devServer: { overlay: true //报错的时候，在页面上弹出一个遮罩，并且把错误显示在上面 }, resolve: { //给我们导入的文件自动按照从前到后的顺序加后缀 extensions: [".vue", ".js", ".json"] }, plugins: [ //将来以template为模版，生成一个index.html并且发布到webpack-dev-server开启的node服务器上面去 new HtmlWebpackPlugin({ template: './template.html' }), new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ] }
三：webpack.config.prod.js
const HtmlWebpackPlugin = require('html-webpack-plugin') const webpack = require('webpack') const path = require('path') //打包之前，删除dist目录 var CleanWebpackPlugin = require('clean-webpack-plugin') //从bundle.js中抽离css const ExtractTextPlugin = require("extract-text-webpack-plugin") module.exports = { entry: { "axios":['axios'], "quanjiatong":['vue','vue-router','vuex'], "jquery":['jquery'], "moment":['moment'], "v-distpicker":['v-distpicker'], "vue-lazyload":['vue-lazyload'], "bundle":'./src/main.js' //别忘记了我们自己的业务代码 },//多入口配置 output:{//生产阶段，必须要设置它 path:path.resolve(__dirname,"dist"), filename:'js/[name]-[hash:5].js' }, module: { rules: [ { test: /\.vue$/, use: ['vue-loader'] }, { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: { loader:'css-loader', options:{ minimize: true, //在抽取css的时候同时进行压缩 publicPath:'dist/css' } } }) }, { test: /\.(jpg|png|gif)$/, use: [ { loader: 'url-loader', options: { limit: 8192,//打包的阀值，如果我们的资源小于阀值，就会打包进入bundle.js，如果静态资源超过阀值，单独提取出来，不打包进入bundle.js，阀值根据公司的需要来设置 name:'statics/imgs/[name]-[hash:5].[ext]' } } ] }, { test: /\.(ttf|eot|woff|svg)$/, use: [ { loader: 'url-loader', options: { limit: 8192,//打包的阀值，如果我们的资源小于阀值，就会打包进入bundle.js，如果静态资源超过阀值，单独提取出来，不打包进入bundle.js，阀值根据公司的需要来设置 name:'statics/fonts/[name]-[hash:5].[ext]' } } ] }, { test: /\.js$/, exclude: /node_modules/, //排除node_modules里面文件，一定要加上 loader: "babel-loader" } ] }, resolve: { //给我们导入的文件自动按照从前到后的顺序加后缀 extensions: [".vue", ".js", ".json"] }, plugins: [ //打包之前，删除dist目录，写在其它插件前面 new CleanWebpackPlugin('dist'), //将来以template为模版，生成一个index.html并且发布到webpack-dev-server开启的node服务器上面去 new HtmlWebpackPlugin({ template: './template.html', minify:{ removeComments: true,//压缩注释 minifyJS: true,//压缩js minifyCSS: true,//压缩css collapseWhitespace: true,//去除空格 } }), new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }), //设置当前环境为生产环境 new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), //压缩，必须先转成es5，再压缩 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, //压缩掉警告 drop_debugger: true, drop_console: true //去除console.log }, comments: false //去掉版权信息等注释 }), //抽离第三方包的，这里不要写bundle.js new webpack.optimize.CommonsChunkPlugin({ name: ["vue-lazyload", "v-distpicker", "moment", "jquery", "quanjiatong", "axios"], // filename: "vendor.js" // (给 chunk 一个不同的名字) minChunks: Infinity, //可以接一个数字，比如2，只有我们的第三方包至少被引用了2次，我才抽，如果只有一次，就不抽，Infinity代表不管你是使用了多少次我都抽取 // (随着 entry chunk 越来越多， // 这个配置保证没其它的模块会打包进 vendor chunk) }), //把抽离的css放在哪里去 new ExtractTextPlugin("css/styles-[hash:5].css"), //只保留moment中的简体中文 new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/) ] }
