webpack的配置及使用
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模块
-
style.css
body { background: #f00; }
-
CSS模块引入
require("style!css!./style.css");
-
安装style-loader,css-loader
npm install style-loader css-loader
-
在项目配置中配置.css类型的加载器
//在配置文件的module属性的loaders数组中加入一个配置 { test: /\.css$/, loader: "style!css" }
调试工具
-
启用devtool插件,并用source-map跟踪模块
webpack --devtool source-map
-
在配置文件中插入devtool的配置属性
//在webpack.config.js返回的配置模块中加入一对键值 devtool: "source-map"
服务器插件
-
安装webpack-dev-server
npm install webpack-dev-server
-
在项目目录下运行
webpack-dev-server
这样执行时会默认的使用iframe模式,即在服务器提供的框架内进行自动刷新页面,需要访问localhost:8080/webpack-dev-server目录下的对应网页,如果要在localhost:8080下执行自动刷新,应当使用--inline模式,在命令行输入
webpack-dev-server --inline
支持ES6
-
安装babel插件
//将babel相关的模块都安装 npm install babel-loader babel-core babel-preset-es2015 --save-dev
-
在配置文件中的进行配置
//在配置文件中加入一个新的loader字段 { test: /\.js$/, loader: "babel" }
-
建立并配置.babelrc文件
//在.babelrc文件中直接输入 { "presets": ["es2015"] }
PS:这样配置会使所有的.js文件进行一次转换
图片压缩
这里的图片压缩是将超过限制(自定义)的图片转换成base64编码的文档。
-
需要的插件为
url-loader
,而该插件依赖于file-loader
,如果没有,二者都需要安装。//先安装file-loader(如果没有) npm install file-loader --save-dev //安装url-loader npm install url-loader --save-dev
-
添加loaders字段
{ test: /\.(jpg/png/gif)$/, loader: "url-loader?limit=10000" }//limit为文件大小限制,单位为bit
文件打包分离
下载extract-text-webpack-plugin
来实现css文件的打包
-
下载插件
npm install extract-text-webpack-plugin --save-dev
-
配置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
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
原文链接:http://www.jianshu.com/p/000ddab4a0ca
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。