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/)
    ]
}