vue webpack基础配置篇(初学者--1)

浏览: 116 发布日期: 2016-12-08 分类: node.js
  1. 安装nodejs。这就不细说了,度娘告诉你。

  2. 安装es6编译插件。$ npm install gulp-babel babel-loader babel-core babel-preset-es2015 --save-dev

  3. 安装webpack。$ npm install webpack html-webpack-plugin extract-text-webpack-plugin --save-dev

  4. 安装vue,vuex。$ npm install vue vuex

  5. 配置webpack.config.js。参考文章最后的代码。

  6. run webpack。$ webpack


> 引用文字

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
        })
    ]
};
返回顶部