webpack配置过程

• webpack是运行在node下的，所以必须先安装node,而node自带npm功能。
• npm是通过package.json来管理模块的，所以webpack也是被管理在package.json中的，所以安装好node之后，先初始化npm，使之产生package.json配置文件。
• npm init -y
• npm install webpack -D -D是指开发环境下
• 配置好webpack资源文件
• npm run webpack就可以生成配置文件中配置的选项，

简易过程

               npm初始化                            

node(npm) —- >>> package.json —- >>> npm install webpack —- >>> 配置webpack文件 —- >>> npm run webpack 启动webpack

webpack配置文件注释

module.exports = {
        entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
        output: {
            path: __dirname + "/build",
            filename: "bundle-[hash].js"
        }
}

webpack.config.js配置文件内容

//处理共用、通用的js
var webpack = require('webpack');
//处理html模板
var HtmlWebpackPlugin = require('html-webpack-plugin');
//css单独打包
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: {
        //用于在生产模式下更新内嵌到css、html文件里的url值
        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,
            //html压缩
//          minify:{
//              //删除注释
//              removeComments:true,
//              //删除空格
//              collapseWhitespace:true
//          }
        })
    ]
});