webpack

WebPack baling press is seen as a module: it is doing, analysis the project structure, you find a JavaScript module and other browsers can’t run directly expand language (Scss, TypeScript, etc. And transform it and packaging to the appropriate format for the use of the browser. Many of today’s web pages can be seen as feature-rich applications with complex JavaScript code and a lot of dependencies. In order to simplify the complexity of development, a number of good practices have emerged in the front-end community, and the following is a more detailed configuration development environment step.

修改翻译结果

安装插件

	 npm install webpack -g
	 npm install webpack --save-dev
	 npm install css-loader style-loader --save-dev
	 npm install extract-text-webpack-plugin@1.0.1 --save-dev
	 npm install  html-webpack-plugin --save-dev
	 npm install html-loader --save-dev
	 npm install url-loader --sava-dev
     npm install hogan --save
	 npm install font-awesome --save

webpack.config.js

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';
const ASSET_PATH 		= process.env.ASSET_PATH || '/dist';
// 获取html-webpack-plugin参数的方法 
var getHtmlConfig = function(name, title){
    return {
        template    : './src/view/' + name + '.html',
        filename    : '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'],
    },
    output: {
        path:  __dirname +'/dist',
        publicPath : ASSET_PATH,
        filename: 'js/[name].js'
    },
    externals : {
        'jquery' : 'window.jQuery'
    },
     module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      },
        { 
        	test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/, use: 'url-loader?limit=100&name=resource/[name].[ext]' 
        },
    ]
  },
  resolve : {
        alias : {
            node_modules    : __dirname + '/node_modules',
            util            : __dirname + '/src/util',
            page            : __dirname + '/src/page',
            service         : __dirname + '/src/service',
            image           : __dirname + '/src/image'
        }
    },
    plugins: [
   
        new webpack.optimize.CommonsChunkPlugin({
            name : 'common',
            filename : 'js/base.js'
        }),
        new ExtractTextPlugin('css/[name].css'),
        new HtmlWebpackPlugin(getHtmlConfig('index', '首页')),
    ]
};


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

module.exports = config;

package.json

{
  "name": "mall_fe",
  "version": "1.0.0",
  "description": "课程设计",
  "main": "index.js",
  "scripts": {
    "dev": "WEBPACK_ENV=dev webpack-dev-server --inline --port 8088",
    "dev_win": "set WEBPACK_ENV=dev && webpack-dev-server --inline --port 8088",
    "dist": "WEBPACK_ENV=online webpack -p",
    "dist_win": "set WEBPACK_ENV=online && webpack -p"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^0.19.1",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  }
}