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