webpack强大之处介绍
1、将css、图片以及其他资源打包到同一个包中
2、在打包之前对文件进行预处理(less、coffee、jsx等)
3、 根据入口文件的不同把你的包拆分成多个包
4、支持开发环境的特殊标志位
5、支持模块代码“热”替换
6、支持异步加载
Webpack不仅帮助你打包所有的Javascript文件,还拥有其他应用需要的资源。这样设计可以让你能创建一个自动包含所有类型依赖的组件。由于可以自动包含所有的依赖,组件也变得更加方便移植。更妙的是,随着应用不断地开发并修改,当你移除某个组件的时候,它的所有依赖也会自动被移除。这意味这不会再有未被使用的css或图片遗留在代码目录中。
一般来说, 都会有一个webpack.config.js
的webpack配置文件.
webpack-merge这个包, 这个包可以让我们生产环境和开发环境很好的隔离配置:
首先,需要将之前的webpack.config.js分成三个文件 --- webpack.common.js, webpack.dev.js, webpack.prod.js.
webpack.common.js
这个是webpack的共同配置, 总体和之前看到的大同小异, 我们主要是导入了两个插件, 一个是清除插件, 一个是创建html的插件.
const htmlWebpackPlugin = require('html-webpack-plugin');
const cleanWebpackPlugin = require('clean-webpack-plugin');
........
entry: {
app: [
'babel-polyfill',
'./app/index.jsx'
]
},
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
rules
配置中我们也就是将一些可能用到的文件也配置到webpack中来,
module: {
rules: [
{
test: /\.less$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "less-loader", // compiles Less to CSS
options: {
javascriptEnabled: true,
modifyVars: themeVariables
}
}
]
},
{
test: /\.(jp(e*)g|png|gif|svg|pdf|ico)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: '[sha512:hash:base64:7].[ext]'
}
}
]
},
{
test: /\.jsx?/,
include: path.resolve(__dirname, 'app'),
exclude: /node_modules/,
loader: 'babel-loader'
}
]
loader的作用和基本用法
webpack中,loader的配置主要在module.rules中进行,这是一个数组,每一个rule做了两件事
- 识别文件类型,来确定具体处理该数据的loader(Rule.test属性)
- 使用相关的loader对文件进行相关的操作转换(Rule.use属性)
常用的loader:
转换编译:script-loader, babel-loader,ts-loader,coffee-loader
处理样式:style-loader,css-loader,less-loader,sass-loader,postcss-loader
处理文件:raw--loader,url-loader,file-loader
处理数据:csv-loader,xml-loader
处理模板语言:html-loader,pug-loader,jade-loader,markdown-loader
清理和测试:mocha-loader,eslint-loader
plugin(loader不能做的处理都能交给plugin来做)
plugins: [
new cleanWebpackPlugin(['build']),
new htmlWebpackPlugin({
template: './app/index.html',
inject: 'body',
})
],
一种插件就是一种函数,通过传入不同的参数,可以实现不同的功能
webpack.dev.js
webpack开发环境的配置, 非常简单, 就是用了之前讲的webpack-merge工具, 就和git一样, 合并了webpack.common.js的配置外新加了可以进行调试的inline-source-map工具, 以及热更新的内容索引.
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
devtool: 'source-map'
});
webpack.prod.js
webpack生产环境的配置, 新加了一个压缩插件以及环境配置的插件, 这里的开发工具和开发还款下的有所不同, 具体可直接看官方文档.
对于webpack配置,要区分开发环境还是产环境
为了避免重复应该提取公共代码
所以一般有这么几个文件
webpack.config.js
webpacl.dev.js
webpack.prod.js
webpack.common.js
此外还有单独配置babel的文件babelrc,webpack可以自动识别