3分钟带你入门webpack

HOW WE USE WEBPACK

Webpack好用,好学,3分钟带你入门。废话不说。

Webpack主要用于模块依赖,核心就是把所有的文件都当成模块处理。为了在js中能够识别这些模块,于是我们就有了各种loader。同时我们还可以给文件压缩优化,生成hash做版本区分。

第一步,学会输入输出。

module.exports = {
entry: 'main.js', // 入口文件
output: {
path: 'dist', // 输出目录
filename: 'bundle.js' // 生成文件
}
}

第二步,使用插件优化压缩输出文件。

var webpack = require('webpack');
module.exports = {
entry: 'main.js',
output: {
path: 'dist',
filename: 'bundle.js'
},
plugins: [new webpack.optimize.UglifyJsPlugin()]
}

第三步,学会使用loader。

var webpack = require('webpack');
module.exports = {
entry: 'main.js',
output: {
path: 'dist',
filename: 'bundle.js'
},
loaders [
{
test: /\.js$/,
loader: 'babel'
}
]
plugins: [new webpack.optimize.UglifyJsPlugin()]
}

通过babel,我们就可以提前使用ES6的新特性了。

第四步,使用其他loader,比如css。

loader: [{
test:/\.css$/,
loader: 'style!css'
}]

之后我们就可以在js里使用require('xxxx.css'),把css文件作为模块导入了。

第五步,区分开发和生产环境。

var env = process.env.NODE_ENV;
module.exports = {...} // 基础配置
if (env === 'production') {
module.exports.plugins.concat([...]); // 为生产环境单独添加插件
}
if (env === 'development') {
module.exports.devtool = 'source-maps'; // 还有eval-source-map等模式
module.exports.watch === true;
}

到这里的时候估计就有人会对NODE_ENV有所疑问了。这家伙哪来的。

其实这个是我们在命令行中运行 NODE_ENV=production webpack就是生产环境模式的打包啦!

当然我们更多的是在package.json的script中写入命令

{
...
"scripts": {
"dev": "set NODE_ENV=development&&webpack"
"build": "set NODE_ENV=production&&webpack"
}
...
}

Finally

嗯哼,小伙伴们,三分钟已到,是不是已经都会了呢!

坚持原创技术分享,您的支持将鼓励我继续创作!