webpack生产阶段配置(四)

webpack生产阶段配置文件

• 上一篇文章介绍webpack打包优化
• 直接拷贝此配置文件安装即可使用
• package.json安装依赖
• .babelrc配置
• 安装方式： npm install

以下完整手工搭建vue生产环境配置

• 这是较基础配置，可根据不同需求所更改， 欢迎各位指导
  
  

webpack.config.prod配置

var HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack')
const path = require('path')

//打包之前，删除dist目录
var CleanWebpackPlugin = require('clean-webpack-plugin')

//抽离css
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    // entry: './src/main.js', //打包的入口文件
    entry:{//当我们需要把第三方包单独抽取出去的时候，那就是多入口
        'axios':['axios'], //属性名称代表的是 打包出来，放在js文件夹下面的文件名称，值是代表第三方包
        'jquery':['jquery'],
        'moment':['moment'],
        'v-distpicker':['v-distpicker'],
        'vue-lazyload':['vue-lazyload'],
        'quanjiatong':['vue','vue-router','vuex'],
        'bundle':'./src/main.js' //别忘记了我们自己的源代码也要打包进入bundle.js
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js' //name就是上一步写的属性名称
    },
    module: {//配置loader
        rules: [
            {
                test: /\.vue$/,
                use: [
                    {
                        loader: 'vue-loader'
                    }
                ]
            },
            {
                test: /\.css$/,
                // use: [
                //     { loader: "style-loader" },
                //     { loader: "css-loader" }
                // ]
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: {
                        loader:"css-loader",
                        options: {
                            minimize: true //压缩抽离出去的css
                        }
                    }
                })
            },
            {
                test: /\.(ttf|eot|svg|woff|jpg|png|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 2000,//这个4000代表阀值，这个阀值，在公司中根据需要进行设置
                            name:'statics/[name]-[hash:5].[ext]'//代表把抽离出去的图片、字体文件从bundle.js中抽离出去之后，放在dist目录下面的statics中
                        }
                    }
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,  //排除node_modules
                loader: "babel-loader"
            }
        ]
    },
    resolve: {
        extensions: ['.vue', '.js', '.json', '*']
    },
    plugins: [//插件中的内容都是new出来的
        //打包之前，删除dist目录，写在其它插件前面
        new CleanWebpackPlugin('dist'),

        //生成index.html
        new HtmlWebpackPlugin({
            template: './template.html', //参照文件的路径
            filename: 'index.html',//最后发布到node服务器上面的名称
            minify:{
                removeComments:true,//压缩注释
                minifyJS:true,//压缩js
                minifyCSS:true,//压缩css
                collapseWhitespace:true,//去除空格
            }
        }),

        //全局导入jquery
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),

        //压缩相关，设置当前环境为生产环境，到时候会自动导入xxx.min.js
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        //压缩js
        new webpack.optimize.UglifyJsPlugin({
            compress: {
              warnings: false, //去掉警告
              drop_debugger: true,
              drop_console: true //去除console.log
            },
            comments: false //去掉版权信息等注释
        }),
        //把抽离出来的样式文件，放在dist目录下面的css目录下的styles.css中
        new ExtractTextPlugin("css/styles.css"),

        //抽离第三方包的，这里不要写bundle.js
        new webpack.optimize.CommonsChunkPlugin({
            name: ['jquery', 'moment','quanjiatong','axios','v-distpicker','vue-lazyload'],
            // filename: "vendor.js"
            // (给 chunk 一个不同的名字)

            minChunks: Infinity,
            // (随着 entry chunk 越来越多，
            // 这个配置保证没其它的模块会打包进 vendor chunk)
        }),
    ]
}

.babelrc配置

{
    "presets": [
        ["env", { "modules": false }]
    ],
    "plugins": [
        [
            "import",
            {
                "libraryName": "iview",
                "libraryDirectory": "src/components"
            }
        ],
        ["component", {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }
        ],
        "syntax-dynamic-import"
    ]
}

package.json安装依赖

• scripts中dev, build配置可根据个人配置

	{
	  "name": "vue_mall_14",
	  "version": "1.0.0",
	  "description": "",
	  "main": "index.js",
	  "scripts": {
	    "test": "echo \"Error: no test specified\" && exit 1",
	    "dev": "webpack-dev-server --config webpack.config.dev.js --progress --open --hot --port 6008",
	    "build": "webpack --progress --config webpack.config.prod.js"
	  },
	  "keywords": [],
	  "author": "",
	  "license": "ISC",
	  "dependencies": {
	    "axios": "^0.17.1",
	    "element-ui": "^2.0.11",
	    "iview": "^2.9.0",
	    "jquery": "^3.3.1",
	    "moment": "^2.20.1",
	    "v-distpicker": "^1.0.16",
	    "vue": "^2.5.13",
	    "vue-lazyload": "^1.1.4",
	    "vue-router": "^3.0.1",
	    "vuex": "^3.0.1"
	  },
	  "devDependencies": {
	    "babel-core": "^6.26.0",
	    "babel-loader": "^7.1.2",
	    "babel-plugin-component": "^1.1.0",
	    "babel-plugin-import": "^1.6.3",
	    "babel-plugin-syntax-dynamic-import": "^6.18.0",
	    "babel-preset-env": "^1.6.1",
	    "clean-webpack-plugin": "^0.1.18",
	    "css-loader": "^0.28.9",
	    "extract-text-webpack-plugin": "^3.0.2",
	    "file-loader": "^1.1.6",
	    "html-webpack-plugin": "^2.30.1",
	    "style-loader": "^0.19.1",
	    "url-loader": "^0.6.2",
	    "vue-loader": "^13.7.0",
	    "vue-template-compiler": "^2.5.13",
	    "webpack": "^3.10.0",
	    "webpack-dev-server": "^2.11.1"
	  }
	}