webpack,the flexible module bundler,灵活的模块打包工具
安装 (Installation)
node.js
如果系统未安装node.js，先安装 node.js
命令行方式使用webpack
全局安装（最佳实践不采用这种方式，采用项目中使用方式）
npm i webpack -g
项目配置使用webpack
- 输入以下命令在根目录增加
package.json
npm init
- 安装webpack
npm i webpack -D
- 安装开发工具（可选 ）
npm i webpack-dev-server -D
使用（Usage）
命令行方式
- 建立
cats.js
var cats = ['dave','henry','martha'];
module.exports = cats;
- 建立入口文件
app.js
var cats = require('./cats.js);
console.log(cats);
- 命令行打包
webpack ./app.js app.bundle.js
- 任务完成，可以运行打包出来的文件
node app.bundle.js
["dave","henry","martha"]
配置文件方式
-
项目结构
1.png - 安装webpack依赖
npm i -D webpack
- 根目录创建
webpack.config.jswebpack配置文件并配置
module.exports = {
entry:'./src/app.js',
output:{
path:'./bin',
filename:'app.bundle.js'
}
};
- 输入命令
webpack
- 任务完成，可以运行打包出来的文件
node app.bundle.js
["dave","henry","martha"]
使用loaders
webpack通过使用loaders将非js资源转成webpack可以使用的静态资源，有各种不同功能的 loaders, 这里通过 babel-loader 举个例子
- 安装依赖
npm i -D babel-core babel-preset-es2015 babel-loader
- 根目录下创建文件
.babelrc并配置
{"presets":["es2015"]}
- 配置
webpack.config.js
module.exports = {
entry:'./src/app.js',
output:{
path:'./bin',
filename:'app.bundle.js'
},
module:{
loaders:[{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel'
}]
}
};
- 安装项目要使用的依赖
npm i -S jquery babel-polyfill
- 编辑
src/app.js
import 'babel-polyfill';
import cats from './cats';
import $ from 'jquery';
$('<h1>Cats</h1>').appendTo('body');
const ul = $('<ul></ul>').appendTo('body');
for (const cat of cats) {
$('<li></li>').text(cat).appendTo(ul);
}
- 输入命令
webpack
- 完成，请享用
使用plugins
举个例子，这里用 uglify plugin
const webpack = require('webpack');
module.exports = {
entry: './src/app.js',
output: {
path: './bin',
filename: 'app.bundle.js',
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
}]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
output: {
comments: false,
},
}),
]
}
使用loaders (Using loaders)
使用plugins (Using plugins)
*转载请注明出处
