先创建一个最简单配置的webpack.config.js. 然后一点儿一点儿添加配置。
const path=require('path');
module.exports={
entry:'./src/index.js',
output:{
path:path.join(__dirname,'dist'),
filename:'bundle.js'
}
module:{
},
plugins:[
]
}
index.js编写react代码
import React from 'react';
import ReactDOM from 'react-dom'
let result='hello';
ReactDOM.render(<h1>{result}</h1>,document.getElementById("root"));
1. include & exclude
因为添加了react需要配置react的解析器：配置loader
module:{
rules:[
{
test:/\.jsx?$/,
use:[
{
loader:'babel-loader',
options: {
presets:["env","stage-0","react"]
}
}
],
include:path.resolve(__dirname,'src'),
exclude:/node_modules/
}
]
}
添加include和exclude：include表示解析哪个路径下的js文件，这里是一个绝对路径。exclude：不解析那个文件中的js文件，最主要的就是node_modules这里使我们安装的各种依赖包，都是已经解析好的文件就不需要再解析了。
- 配置js的loader时需要配置options.presets：["env","stage-0","react"]
npm i babel-preset-env babel-preset-stage-0 babel-preset-react -D
- 第二种配置options方法是删除当前配置，新建一个与webpack.config.js平级的 .babelrc文件。文件内代码为：
{
"presets": [
"env",
"stage-0",
"react"
]
}
2.resolve.modules
resolve:{
//当你需要指定除node_modules之外的其他模块目录的话
modules:[path.resolve('node_modules'),path.resolve('lib')]
},
配置resolve：如果以后项目的层级很深，很多文件需要去找一个文件夹中的文件可能会出现这种情况：../../../../../../index.js 这样无疑增加了文件查找的时间。
3. resolve.alias
配置别名
resolve:{
alias:{
react:path.resolve('node_modules/react/cjs/react.production.min.js')
}
},
当加载react模块的时候，不需要去找main 中的 index 等等 直接找到这个地址。
4. DLL
.dll 为后缀的文件称为动态链接库，在一个动态链接库中可以包含给其他模块调用的函数和数据
- 把基础模块独立出来打包到单独的动态连接库里
- 当需要导入的模块在动态连接库里的时候，模块不能再次被打包，而是去动态连接库里获取 dll-plugin
新建一个webpack配置文件，将需要单独打包的文件单独打包出来：webpack.react.config.js
const path=require('path');
const webpack=require('webpack');
module.exports={
entry:{
react:['react','react-dom']
},
output:{
path:path.join(__dirname,'dist'),
filename:'[name]_dll.js',
library:'_dll_[name]' //指定的导出变量的名称，全局变量的名字，其他模块会从此变量获得里面的模块
},
plugins:[
new webpack.DllPlugin({
name:'_dll_[name]',
path:path.join(__dirname,'dist','manifest.json')
})
]
}
将其打包：
在webpack.config.js配置plugins：
plugins:[
new webpack.DllReferencePlugin({
manifest:path.join(__dirname,'dist','manifest.json')
})
]
重新打包，打包时间明显减少。
5.HappyPack
HappyPack就能让Webpack把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。使用计算机的cpu多核进行打包。
npm 安装
npm i happypack@next -D
const path=require('path');
module.exports={
entry:'./src/index.js',
output:{
path:path.join(__dirname,'dist'),
filename: 'bundle.js'
},
module:{
rules:[
{
test:/.jsx?$/,
use:'happypack/loader?id=babel',
},
{
test:/.css?$/,
use:'happypack/loader?id=css',
}
]
},
plugins:[
new HappyPack({
id:'babel',
loaders:['babel-loader']
}),
new HappyPack({
id:'css',
loaders:['style-loader','css-loader']
})
]
}
重新打包 结果凉了：打包时间反而长了。
可能是因为新建的测试项目，文件比较少，还不如使用单核。尴尬了。。
