webpack

一、准备工作

1、下载、安装node nodejs.cn

在这里，可以安装一个淘宝镜像，方便之后要安装的东西，提升速度
安装之后，以下所有npm的命令改为cnpm即可

$ npm install cnpm -g --registry=https://registry.npm.taobao.org

2、 用npms生成 package.json

$ npm init

3、安装webpack

$ npm install webpack –g
//或 将 Webpack 安装到项目的依赖中
$ npm install webpack --save-dev
//其中--save-dev 会将安装的模块和版本信息写入package.json

二、使用

1、在项目的根目录添加webpack.config.js

var webpack = require('webpack');
module.exports = {
    // 配置入口
    entry: {
        example: './js/example.js'
    },
    // 编译后的文件路径
    output: {
        path: './build/jsBuild',
        filename: '[name].build.js'
    },
    module: {
        // 编译规则,根据不同的需要添加需要编译的规则
        loaders: []
    },
    // 辅助的插件
    plugins: [ ]
};

2、js文件压缩打包

//监听变动并自动打包
$ webpack -w --config webpack.config.js
//压缩混淆脚本
$ webpack –p --config webpack.config.js

3、css文件单独打包

• 安装插件extract-text-webpack-plugin，安装css-loader及style-loader

$ npm install extract-text-webpack-plugin --save-dev
$ npm install --save-dev css-loader style-loader

• 然后按照上述webpack.config.js文件添加css相关配置项，包括：

// 引入css 单独打包插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");
// 设置生成css 的路径和文件名，会自动将对应entry入口js文件中引入的CSS抽出成单独的文件
var packCSS = new ExtractTextPlugin('./cssBuild/[name].min.css'); 
//在plugins 中引入并使用
plugins: [
    packCSS
 ]
//配置编译规则
loaders: [
    {test: /\.css$/,loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
]
//我们需要首先在入口js文件中引用相应的css文件
require('./css/example.css');

4、sass文件编译及打包

• 安装sass-loader及node-loader

$ npm install --save-dev sass-loader
$ npm install --save-dev node-sass

• 在配置文件中添加相应配置

//更改配置文件，在loader中添加如下代码
{
    test:/\.scss$/,
    loader:ExtractPlugin.extract('style-loader', 'css-loader!sass-loader')
}
//在js中引入相应的scss文件
require('../sass/sassTest.scss');

5、es6风格代码编译为es201风格

• 安装babel-loader 和 转码规则

$ npm install babel-loader --save-dev
$ npm install babel-preset-es2015 --save-dev

• 添加相应配置

module: {
// 编译规则
loaders: [
        {
         test: /\.js$/,
         exclude: /(node_modules|bower_components)/,
         loader: 'babel-loader',
         query: {presets: ['es2015']}
        }
    ]
},

---

经过上述步骤，最终的webpack.config.js文件

var webpack = require('webpack');
//引入css打包插件
var ExtractPlugin = require('extract-text-webpack-plugin');
//设置生成css 的路径和文件名，会自动将对应entry入口js文件中引入的CSS抽出成单独的文件
var packCSS = new ExtractPlugin('../cssBuild/[name].min.css');
module.exports = {
  // 配置入口
  entry: {
      example: './js/index.js'
  },
  // 编译后的文件路径
  output: {
      path: './build/jsBuild',
      filename: '[name].build.js'
  },
  module: {
    // 编译规则,根据不同的需要添加需要编译的规则
    loaders: [
      {test: /\.css$/,loader: ExtractPlugin.extract("style-loader", "css-loader")},
      {test: /\.scss$/,loader:ExtractPlugin.extract('style-loader', 'css-loader!sass-loader')},
      {test: /\.js$/,exclude: /(node_modules|bower_components)/,loader: 'babel-loader',query: {presets: ['es2015']}}
    ]
  },
  // 辅助的插件
  plugins:[
        packCSS
  ]
}