webpack

 装置

命令行输入

npm install webpack

设置文件 webpack.config.js

moudule.exports = {
  //Import 进口文件
  entry: "./entry.js",
  //Output dir 输出目次
  output: {
    path: "",//当前目次标识：__dirname
    filename: ""
  }
  //dependency 依靠模块
  module: {
    loaders: [
      {
        test:/\.css$/,
        loader: "style!css"
      }//划定某种文件范例的加载模块
    ]
  }
}

 模块化

//遵照CMD范例
var something = "something";
module.exports = something;

 引入模块

 通例模块

var st = require("something");
console.log(st);//"something"

 引入CSS模块

1. style.css

body {
  background: #f00;
}

2. CSS模块引入

require("style!css!./style.css");

3. 装置style-loader，css-loader

npm install style-loader css-loader

4. 在项目设置中设置.css范例的加载器

//在设置文件的module属性的loaders数组中到场一个设置
{
  test: /\.css$/,
  loader: "style!css"
}

 调试东西

1. 启用devtool插件，并用source-map跟踪模块

webpack --devtool source-map

2. 在设置文件中插进去devtool的设置属性

//在webpack.config.js返回的设置模块中到场一对键值
devtool: "source-map"

 服务器插件

1. 装置webpack-dev-server

npm install webpack-dev-server

2. 在项目目次下运转

webpack-dev-server

如许实行时会默许的运用iframe形式，即在服务器供应的框架内举行自动革新页面，须要接见localhost:8080/webpack-dev-server目次下的对应网页，假如要在localhost:8080下实行自动革新，应该运用–inline形式，在命令行输入

webpack-dev-server --inline

 支撑ES6

1. 装置babel插件

//将babel相干的模块都装置
npm install babel-loader babel-core babel-preset-es2015 --save-dev

2. 在设置文件中的举行设置

//在设置文件中到场一个新的loader字段
{
  test: /\.js$/,
  loader: "babel"
}

3. 竖立并设置.babelrc文件

//在.babelrc文件中直接输入
{
  "presets": ["es2015"]
}

PS：如许设置会使一切的.js文件举行一次转换

 图片紧缩

这里的图片紧缩是将凌驾限定（自定义）的图片转换成base64编码的文档。

1. 须要的插件为url-loader,而该插件依靠于file-loader，假如没有，两者都须要装置。

//先装置file-loader（假如没有）
npm install file-loader --save-dev
//装置url-loader
npm install url-loader --save-dev

2. 增加loaders字段

{
  test: /\.(jpg/png/gif)$/,
  loader: "url-loader?limit=10000"
}//limit为文件大小限定,单元为bit

 文件打包星散

下载extract-text-webpack-plugin来完成css文件的打包

1. 下载插件

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

2. 设置etwp

//在设置文件中新建一个etwp的实例
var etwp = new require("extract-text-webpack-plugin");
//在plugins字段中引入
plugins: [
  etwp
]
//在loaders字段中到场
{
  test: /\.css$/,
  loader: etwp.extract("styles.css")//牢记是挪用etwp中的extract要领
}

 完成common.js的天生

common.js是将各个页面中的大众模块提取出来构成的鸠合，减少了模块的反复挪用

设置要领

//在设置文件中
var buildCommon = new require("webpack.optimize.CommonsChunkPlugin");

//设置差别的buddle.js输出
entry: {
  page1: "./js/entry.js",
  page2: "./js/entry2.js"
}

//在plugins字段中到场
plugins: [
  buildCommon("common.js")
]

webpack官网
webpack中文文档
原文链接