Vue之3——webpack创建vue项目

1、先创建一个空目录，初始化

cd demo
npm init

执行后，有一系列选项，按回车键快速确认，最终项目目录下生成 package.json文件。

2、本地局部安装 webpack

npm install webpack --save-dev

安装 webpack-dev-server

npm install webpack-dev server --save -dev

3、增加webpack.config.js

webpack.config.js文件

var path= require ('path');
var config =  {
    entry: {
        main: './main'
    },
    output : {
        path: path.join(__dirname,'./dist'),
        publicPath: '/dist/',
        filename: 'main.js',
    }
}
module.exports = config;

在package.json 中增加快速启动 webpack-dev-server 服务的脚本

"dev": "ebpack-dev -server open --config webpack.config.js"

4、webpack增加各种loader

npm install css-loader --save-dev 
npm install style-loader --save-dev

webpack.config.js增加loader

    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        css: ExtractTextPlugin.extract({
                            use: 'css-loader',
                            fallback: 'vue-style-loader'
                        })
                    }
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: 'css-loader',
                    fallback: 'style-loader'
                })
            },
            {
                test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
                loader: 'url-loader?limit=1024'
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin("main.css")
    ]

5、webpack插件
extract-text-webpack-plugin的插件可以把散落在各地的 css 提取出来，并生 main.css 的文件。

npm install extract-text-webpack-plugin --save-dev

配置见上述‘4’。

6、使用Vue
需要先安装 vue-loader、vue-style-loader 等加载器并做配置。使用 S6
语法，还需要安装 babel、babeI-loader加载器。

npm install --save-dev babel 
npm install --save-dev babel-loader 
npm install --save-dev babel-core 
npm install --save-dev babel-plugin-transform-runtime 
npm install --save-dev babel-preset-es2015 
npm install --save-dev babel-runtime
npm install --save vue 
npm install --save-dev vue-loader 
npm install --save-dev vue-style-loader 
npm install --save-dev vue-template-compiler 
npm install --save-dev vue-hot-reload-api 

建立名.babelrc ，并写入 babel 的配置

{
    "presets": ["es2015"],
    "plugins": ["transform-runtime"],
    "comments": false
}

配置好这些后，就可以使用vue了。

7、用于正式环境
安装 url-loader、file-loader 来支持图片、字体等文件。

npm install --save-dev url-loader 
npm install --save-dev file-loader

打包会用到下面两个依赖：

npm install --save-dev webpack-merge 
npm install --save -dev html-webpack-plugin

正式环境文件webpack.prod.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var merge = require('webpack-merge');
var webpackBaseConfig = require('./webpack.config.js');

// 清空基本配置的插件列表
webpackBaseConfig.plugins = [];

module.exports = merge(webpackBaseConfig, {
    output: {
        publicPath: '/dist/',
        // 将入口文件重命名为带有 20 位 hash 值的唯一文件
        filename: '[name].[hash].js'
    },
    plugins: [
        new ExtractTextPlugin({
            // 提取 css，并重命名为带有 20 位 hash 值的唯一文件
            filename: '[name].[hash].css',
            allChunks: true
        }),
        // 定义当前 node 环境为生产环境
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        // 压缩 js
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        // 提取模板，并保存入口 html 文件
        new HtmlWebpackPlugin({
            filename: '../index_prod.html',
            template: './index.ejs',
            inject: false
        })
    ]
});