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")
]

文／Asambojur（简书作者）

原文链接：http://www.jianshu.com/p/000ddab4a0ca

著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。