1. webpack 的loader 和 plugin 有什么区别
1.对于loader，它是一个转换器，将A文件进行编译形成B文件，这里操作的是文件，比如将 A.scss 转换为 A.css，是单纯的文件转换过程。
2. plugin 是插件扩展器（目的在于解决 loader 无法实现的其他事），针对webpack打包的过程，它不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些事件钩子，执行任务。plugin 比loader 强大，通过plugin 可以访问 compliler和compilation过程，通过钩子拦截 webpack 的执行。
module.exports = {
mode: 'development', //配置开发环境
context: __dirname + '/src',
entry: './index/index.js',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
loader:[
],
plugins: [
newwebpack.NamedModulesPlugin(),
newwebpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
]
};
image.png
- webpack打包的时候 如何配置多入口
简单规则：每个 HTML 页面都有一个入口起点。单页应用(SPA)：一个入口起点，多页应用(MPA)：多个入口起点。
module.exports = {
//...
entry: {
home: './home.js',
shared: ['react', 'react-dom', 'redux', 'react-redux'],
catalog: {
import: './catalog.js',
filename: 'pages/catalog.js',
dependOn: 'shared',
},
personal: {
import: './personal.js',
filename: 'pages/personal.js',
dependOn: 'shared',
chunkLoading: 'jsonp',
layer: 'name of layer', // set the layer for an entry point
},
},
};
3. webpack 打包的时候可以做哪些优化
1.使用监听模式或热更新热替换 线上环境的编译，加个 --watch 参数就可以了
// 开发环境设置本地服务器，实现热更新
devServer: {
contentBase: path.resolve(__dirname, 'static'),
// 提供给外部访问
host: '0.0.0.0',
port: 8388,
// 允许开发服务器访问本地服务器的包JSON文件，防止跨域
headers: {
'Access-Control-Allow-Origin': '*'
},
// 设置热替换
hot: true,
// 设置页面引入
inline: true
},
// 文件输出配置
output: {
// 设置路径，防止访问本地服务器相关资源时，被开发服务器认为是相对其的路径
publicPath: 'http://localhost:8188/dist/js/',
},
// 插件配置
plugins: [
// 热更新替换
new webpack.HotModuleReplacementPlugin()
]
2. 开发环境不做无意义的操作
1.很多配置，在开发阶段是不需要去做的，我们可以区分出开发和线上的两套配置，这样在需要上线的时候再全量编译即可比如说 代码压缩、目录内容清理、计算文件hash、提取CSS文件等
3.babel-loader开启缓存
babel-loader在执行的时候，可能会产生一些运行期间重复的公共文件，造成代码体积大冗余，同时也会减慢编译效率可以加上cacheDirectory参数或使用 transform-runtime 插件试试
// webpack.config.js
use: [{
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}]
// .bablerc
{
"presets": [
"env",
"react"
],
"plugins": ["transform-runtime"]
}
4.不需要打包编译的插件库换成全局<script>标签引入的方式
5. 提取公共代码
使用CommonsChunkPlugin提取公共的模块，可以减少文件体积，也有助于浏览器层的文件缓存，还是比较推荐的
6. 以模块化来引入
有些模块是可以以模块化来引入的，就是说可以只引入其中的一部分，比如说lodash
// 原来的引入方式
import {debounce} from 'lodash';
//按模块化的引入方式
import debounce from 'lodash/debounce';
参考地址 https://www.cnblogs.com/imwtr/p/7801973.html
https://webpack.docschina.org/configuration/performance/
