vue webpack v1 & v2 基礎配置篇（初學者--1）

Webpack如今有v1和v2兩種版本。

1. 安裝nodejs。這就不細說了，度娘告訴你。

2. cmd定位到開發文件夾，按照提示生成package.json。npm init

3. 安裝es6編譯插件。$ npm install css-loader babel-loader babel-core babel-preset-es2015 --save-dev

4. 安裝webpack。$ npm install webpack html-webpack-plugin extract-text-webpack-plugin vue-template-compiler --save-dev
   若是是v2版本，還需npm install --save-dev extract-text-webpack-plugin@beta

5. 安裝vue，vuex。$ npm install vue vuex

6. 配置webpack.config.js。參考文章最後的代碼。

7. run webpack。$ webpack

//webpack v1
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        app: './app.js', //入口js
        vendors: [
            'vue', 'vuex' //單獨抽出vue，vuex打包成一個js
        ]
    },
    output: {
        path: 'dist',
        filename: '[name].js'
    },
    resolve: {
        extensions: ['', '.js', '.css', '.vue']
    },
    module: {
        loaders: [
            {
                test: /\.vue$/, 
                loader: 'vue',
                exclude: /node_modules/
            },
            { 
                test: /\.js$/, 
                  loader: 'babel',
                  exclude: /node_modules/
            },
            {test: /\.css$/,loader: "style!css"},
        ]
    },
    vue: { //從vue中抽出獨立的css文件
        loaders: {
            css: ExtractTextPlugin.extract("css")
        }
    },
    babel: { //es6轉爲es5代碼
        presets: ['es2015'],
        plugins: ['transform-runtime'] //這個必須install babel-plugin-transform-runtime
    },
    plugins: [
        // 提取css爲單文件
        new ExtractTextPlugin("[name].[contenthash].css"),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendors',
            filename: 'vendors.js',
        }),
    //在index.html中引用編譯後的js，css
        new HtmlWebpackPlugin({
          filename: 'index.html',
          template: 'index.html',
          inject: true
        })
    ]
};

//webpack v2
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        app: './app.js',
        vendors: [
            'vue', 'vuex', 'vue-router'
        ]
    },
    output: {
        path: 'dist',
        filename: '[name].js'
    },
    resolve: {
       // modules: ["node_modules"],
        extensions: ['.css', '.vue', '.js']
    },
    module: {
        rules: [
            {
                test: /\.vue$/, 
                loader: "vue-loader",
                options: {
                    loaders: {
                        "css": ExtractTextPlugin.extract("css-loader")
                    }                    
                },
                exclude: /node_modules/
            },
            { 
                test: /\.js$/, 
                loader: "babel-loader",
                options: {
                    presets: ['es2015'],
                    plugins: ['transform-runtime'] 
                },
                exclude: /node_modules/
            },
            {test: /\.css$/,use: ["style-loader", "css-loader"]},
        ]
    },
    resolve: {
        alias: {
          'vue': 'vue/dist/vue.common.js',
          //'vue-router': path.join(__dirname, '..', 'src')
        }
      },
    plugins: [
        // 提取css爲單文件
        new ExtractTextPlugin({
            filename: "[name].[contenthash].css",
            allChunks: true
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendors',
            filename: 'vendors.js',
        }),
        new HtmlWebpackPlugin({
          filename: 'index.html',
          template: 'index.html',
          inject: true
        })
    ]
};