项目初始化（前端）

npm init

https://blog.csdn.net/xiaoxingxingzai/article/details/100517851

安装webpack

1. 安装全局的webpack(webpack4.0以上需要安装webpack-cli)
   npm install -g webpack

2. 安装本地的webpack（本地：也就是你的项目路径下，首先要npm init）
   npm install webpack webpack-cli --save-dev

3. 查看是否安装成功
   webpack -v
   

webpack.config.js（webpack的核心配置文件）

1. webpack 能够去处理那些非 JavaScript 文件比如css文件
   npm install css-loader style-loader --save-dev

2. 前提上在js文件中加载css文件，导致先加载js，再加载css，用户效果不好。
   因此要 把css单独打包到文件里

1.安装extract-text-webpack-plugin
npm install extract-text-webpack-plugin --save-dev
2.配置文件添加对应配置
首先require-下
var ExtractTextPlugin = require(“extract-text-webpack-plugin”);
3.plugins里面添加
new ExtractTextPlugin(“styles.css”),

3. html模板的处理(<%= require(’./layout/html-head.html’)%>)
   需要安装才可以使用
   npm install html-loader --save-dev

4. 加载图片（与加载css文件类似）
   npm install url-loader --save-dev

5. 文件的加载，用的是url-loader，所以不用安装了

6. npm install file-loader --save-dev

webpack-dev-server

npm install webpack-dev-server --save-dev

使用 webpack-dev-server

webpack-dev-server

安装全局的webpack-dev-server
npm install webpack-dev-server webpack-cli -g

启动webpack-dev-server

1. webpack-dev-server 默认端口号8080
2. webpack-dev-server --inline --port 8088 修改启动的端口号

报错：
npm install html-webpack-plugin --save-dev
npm install webpack-bundle-analyzer --save-dev
npm install [email protected] --save-dev

配置简单命令启动

============
详细配置

===================

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

// 环境变量配置，dev / online
var WEBPACK_ENV         = process.env.WEBPACK_ENV || 'dev';

// 获取html-webpack-plugin参数的方法 
var getHtmlConfig = function(name, title){
    return {
        template    : './src/view/' + name + '.html', //html原始的模板
        filename    : 'view/' + name + '.html', //目标文件所放的位置的模板/dist/view/name.html 
        title       : title,
        inject      : true,
        hash        : true,
        chunks      : ['common', name]
    };
};
// webpack config
var config = {
    entry: {
        'common'            : ['./src/page/common/index.js'],
        'index'             : ['./src/page/index/index.js'],
        'list'              : ['./src/page/list/index.js'],
        'detail'            : ['./src/page/detail/index.js'],
        'cart'              : ['./src/page/cart/index.js'],
        'user-login'        : ['./src/page/user-login/index.js'],
        'user-register'     : ['./src/page/user-register/index.js'],
        'user-pass-reset'   : ['./src/page/user-pass-reset/index.js'],
        'user-center'       : ['./src/page/user-center/index.js'],
        'user-center-update': ['./src/page/user-center-update/index.js'],
        'user-pass-update'  : ['./src/page/user-pass-update/index.js'],
        'result'            : ['./src/page/result/index.js'],
    },
    output: {
        path: './dist',
        publicPath : '/dist',
        filename: 'js/[name].js'
    },
    externals : {
        'jquery' : 'window.jQuery'
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader") },
            { test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=100&name=resource/[name].[ext]' },
            { test: /\.string$/, loader: 'html-loader'}
        ]
    },
    resolve : {
        alias : {
            node_modules    : __dirname + '/node_modules',
            util            : __dirname + '/src/util',
            page            : __dirname + '/src/page',
            service         : __dirname + '/src/service',
            image           : __dirname + '/src/image'
        }
    },
    plugins: [
        // 独立通用模块到js/base.js
        new webpack.optimize.CommonsChunkPlugin({
            name : 'common',
            filename : 'js/base.js'
        }),
        // 把css单独打包到文件里
        new ExtractTextPlugin("css/[name].css"),
        // html模板的处理
        new HtmlWebpackPlugin(getHtmlConfig('index', '首页')),
        new HtmlWebpackPlugin(getHtmlConfig('list', '商品列表页')),
        new HtmlWebpackPlugin(getHtmlConfig('detail', '商品详情页')),
        new HtmlWebpackPlugin(getHtmlConfig('cart', '购物车')),
        new HtmlWebpackPlugin(getHtmlConfig('user-login', '用户登录')),
        new HtmlWebpackPlugin(getHtmlConfig('user-register', '用户注册')),
        new HtmlWebpackPlugin(getHtmlConfig('user-pass-reset', '找回密码')),
        new HtmlWebpackPlugin(getHtmlConfig('user-center', '个人中心')),
        new HtmlWebpackPlugin(getHtmlConfig('user-center-update', '修改个人信息')),
        new HtmlWebpackPlugin(getHtmlConfig('user-pass-update', '修改密码')),
        new HtmlWebpackPlugin(getHtmlConfig('result', '操作结果')),
    ]
};

if('dev' === WEBPACK_ENV){
    config.entry.common.push('webpack-dev-server/client?http://localhost:8088/');
}

module.exports = config;