詳解基于Vue2.0項(xiàng)目的webpack配置文件

Vue提供了一個(gè)很好的命令行工具：vue-cli，用來快速構(gòu)建Vue項(xiàng)目。
現(xiàn)在，我們改造一個(gè)由vue-cli創(chuàng)建的simple project，使其提供更強(qiáng)大的功能。

1. 創(chuàng)建一個(gè)簡(jiǎn)單的Vue項(xiàng)目

vue init webpack-simple my-webpack-simple-demo

2. package.json

{
  ...
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --env=integrate",
    "build-test": "cross-env NODE_ENV=production webpack --progress --hide-modules --env=test",
    "build-release": "cross-env NODE_ENV=production webpack --progress --hide-modules --env=release"
  },
  "dependencies": {
    "vue": "^2.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-latest": "^6.0.0",
    "clean-webpack-plugin": "^0.1.15",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "element-ui": "^1.2.3",
    "extract-text-webpack-plugin": "^2.0.0-beta.4",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.28.0",
    "node-sass": "^4.5.0",
    "sass-loader": "^5.0.1",
    "style-loader": "^0.13.2",
    "url-loader": "^0.5.8",
    "vue-cookie": "^1.1.3",
    "vue-loader": "^11.0.0",
    "vue-resource": "^1.2.1",
    "vue-router": "^2.3.0",
    "vue-style-loader": "^2.0.3",
    "vue-template-compiler": "^2.2.1",
    "vuex": "^2.2.1",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  }
}

3. 文件結(jié)構(gòu)

webpack.png

4. .babelrc

Babel是ES6轉(zhuǎn)碼器，可以將項(xiàng)目中用到的ES6語(yǔ)法編譯為ES5語(yǔ)法。

我們需要安裝babel-loader babel-core，然后新增.babelrc文件：

{
  "presets": [
    ["latest", {
      "es2015": { "modules": false }
    }]
  ]
}

5.webpack.config.js

詳解請(qǐng)看注釋：

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');

var srcPath = path.join(__dirname, './src/');

/*-----------------根據(jù)process變量找到對(duì)應(yīng)的webconfig文件-----------------*/
function getEnv() {
    var argv = process.argv.slice(2);
    for (var i = 0; i < argv.length; i++) {
        if (argv[i].indexOf('--env=') >= 0) {
            return argv[i].substr(6);
        }
    }
}
//webconfig是api配置文件。一般來說，不同的環(huán)境后臺(tái)api地址會(huì)不同
//例如：test環(huán)境下，api為http://test.api.com; 
//release環(huán)境下，api為http://release.api.com; 
//需要根據(jù)不同的環(huán)境，把a(bǔ)pi配置給相應(yīng)的ajax插件，如vue-resource, axios
//例如，配置vue-resource: Vue.http.options.root = webconfig.host;
var env = getEnv();
var configPath = '';
switch (env) {
    case 'test' :
        configPath = path.join(__dirname, './src/config/webconfig_test.js');
        break;
    default :
        configPath = path.join(__dirname, './src/config/webconfig_release.js');
}
/*-----------------webpack 配置-----------------*/
module.exports = {
    //完整寫法為entry:{main:  './src/main.js'}，所以，[name]默認(rèn)為"main"
    //也可以按照喜好自行定義[name]的名字
    entry: './src/main.js',
    output: {
        //必須是絕對(duì)路徑（所以這里用到的是path.resolve，而不是path.join）
        //指定文件打包的輸入目錄
        path: path.resolve(__dirname, './dist'),
        //output.path中的URL以HTML頁(yè)面為基準(zhǔn)，表示資源的發(fā)布地址
        //當(dāng)配置過該屬性后，打包文件中所有通過相對(duì)路徑引用的資源都會(huì)被配置的路徑所替換
        // webpack-dev-server也會(huì)默認(rèn)從publicPath為基準(zhǔn)，使用它來決定在哪個(gè)目錄下啟用服務(wù)，來訪問webpack輸出的文件。
        publicPath: '/',
        // 指定輸出文件的名稱，[hash]會(huì)自動(dòng)給文件名加上hash后綴
        filename: 'js/build-[hash].js',
        //異步加載的JS文件不會(huì)被打包到output->path下，所以需要為其做專門配置
        //[id]會(huì)自動(dòng)為異步文件添加序列號(hào)
        //這里，和vue-router配合，實(shí)現(xiàn)切換路由時(shí)按需加載JS文件
        chunkFilename: 'js/[id].build.js?[chunkhash]'
    },
    //注意：利用ExtractTextPlugin插件將css或者scss(require("style.css"))單獨(dú)打包到一個(gè)CSS文件
    //這樣，樣式不會(huì)內(nèi)聯(lián)到JS里面
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
                        // the "scss" and "sass" values for the lang attribute to the right configs here.
                        // other preprocessors should work out of the box, no loader config like this necessary.
                        'scss': 'vue-style-loader!css-loader!sass-loader',
                        'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
                    }
                    // other vue-loader options go here
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallbackLoader: 'style-loader',
                    loader: 'css-loader'
                })
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    //resolve-url-loader may be chained before sass-loader if necessary
                    use: ['css-loader', 'sass-loader']
                })
            },
            {
                test: /\.(png|jpg|gif|svg|ico)$/,
                loader: 'file-loader',
                options: {
                    //圖片導(dǎo)出路徑
                    name: 'images/[name].[ext]'
                }
            }
        ]
    },
    resolve: {
        //模塊別名定義，方便后續(xù)直接引用別名
        //例如，引用webconfig模塊，語(yǔ)法為: require('webconfig')
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            appCss: srcPath + 'sass/app.scss',
            favicon: srcPath + 'images/favicon.ico',
            webconfig: configPath,
            apiconfig: srcPath + 'config/apiconfig.js'
        }
    },
    //webpack-dev-server配置
    devServer: {
        historyApiFallback: true,
        noInfo: true,
        //指定服務(wù)器文件路徑
        contentBase: "./dist",
        port: 9002
    },
    performance: {
        //不展示警告或錯(cuò)誤提示
        hints: false
    },
    //選擇一種source map來增強(qiáng)調(diào)試過程，該選項(xiàng)會(huì)影響構(gòu)建和重構(gòu)建的速度
    devtool: '#eval-source-map',
    plugins: [
        //定義全局插件，不需要require()引入，直接可以使用模塊名，如：webconfig.host;
        new webpack.ProvidePlugin({
            webconfig: 'webconfig',
            API_CONFIG_URL: "apiconfig",
        }),
        // 依據(jù)一個(gè)簡(jiǎn)單的模板，幫你生成最終的Html5文件
        // 這個(gè)文件中自動(dòng)引用了你打包后的JS文件。
        // 每次編譯都在文件名中插入一個(gè)不同的哈希值
        new HtmlWebpackPlugin({
            template: __dirname + "/index.tpl.html",
            favicon: 'src/images/favicon.ico',
        }),
        //將CSS從JS文件中分離出來，并添加到輸出html文件中
        new ExtractTextPlugin('css/' + '[name]-[hash].css'),
        //每次build時(shí)，先清除dist包
        new CleanWebpackPlugin(['dist'], {
            verbose: true,
            dry: false
        })
    ]
};
//生成環(huán)境下的配置，提供文件壓縮功能
if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map';
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            compress: {
                warnings: false
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    ])
}

6. 用到的插件plugins

1). cross-env

cross-env用來設(shè)置環(huán)境變量。
Node環(huán)境中的環(huán)境變量為NODE_ENV，用process.env.NODE_ENV訪問該變量。
可以看到package.json中的scripts用到這個(gè)功能：

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --env=integrate"
  }
2). webpack-dev-server

webpack-dev-server提供了一個(gè)服務(wù)器和實(shí)時(shí)重載（live reloading）功能。
webpack-dev-server是一個(gè)小型的node.js Express服務(wù)器,它使用webpack-dev-middleware中間件來為通過webpack打包生成的資源文件提供Web服務(wù)。

3). html-webpack-plugin

該插件可以生成一個(gè)HTML5文件，它可以動(dòng)態(tài)添加script標(biāo)簽加載webpack生成包。如果生成包帶hash值，那么，就必須用這個(gè)插件了。

4). extract-text-webpack-plugin

將JavaScript中導(dǎo)入的CSS提取為單個(gè)CSS文件。

5). clean-webpack-plugin

刪除目標(biāo)目錄下所有文件

更多高階內(nèi)容，可移步《小專欄-娜姐聊前端》。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容