webpack服务器渲染react环境搭建
本片博客写给我自己看,他人如果看不懂可以留言
首先配置下需要设置
target: 'node',
安装webpack-node-externals
配置
externals: [nodeExternals()]
安装
isomorphic-style-loader
配置rules中cssloader
use:['isomorphic-style-loader', 'css-loader']
webpack的代码分割配置代码,异步加载模块配置
需要在webpack.config.js配置中添加字段 optimization
首先在这里简单提一下
optimization 里面可以配置 tree shaking
添加usedExports: true即可
下面我们进入正题
只需要在optimization里面添加配置
splitChunks: { chunks: 'all' }
即可 代码分割
配置异步加载
可以在函数里面直接import('xxxx')
$ sudo cnpm i -D babel-plugin-dynamic-import-webpack
options: { "presets": [ "@babel/preset-env", "@babel/preset-react", ], plugins: ['dynamic-import-webpack'] },
file-loader的placeholder占位符中文文档
这篇文章是我对照着webpack官方文档一个一个翻译的,绝非右键翻译。保证同学们能看得懂
[ext] 表示 文件的后缀
[name] 表示 当前文件名
[path] 表示 相对于webpack的路径
[folder] 表示源文件所在文件夹路径
[emoji] 表示一个随机的emoji表情
[emoji:<length>] 表示 自定义随机表情的数量
[hash] 表示文件的hash值
[contenthash] 也是一个hash值只不过是内容hash 上一个是文件名hash
webpack打包配置
我写这篇文章一来是为了巩固自己的学习
二来是为了更多的同学在学习webpack中有所收获
webpack安装分为两种 一种是全局安装global
一种是局部安装local
我个人觉得我比较喜欢使用局部安装。不管然和插件
全局暗转只需要执行
npm install webpack webpack-cli -g
安装完成之后就可以是看到版本号了
webpack -v
本地安装命令一样不需要加-g
本地安装的同学大家使用webpack一定会报错 not fount webpack
因为我们没有全局安装所以在执行webpack的时候没有找到 很正常
原理很简单在termainal中执行webpack 的时候是全局的webpack
这个时候我们就可以使用npx webpack了
npx是执行局部的webpack
下面我们来看一看webpack如何使用
第一种方法是
直接执行npx webpack index.js
可以看到打包了一个js文件
第二种方法是配置一个webpack.config.js
里面的配置大家可以跟我一起写
我就不用代码高亮了,这个代码高亮的编辑器使用太麻烦。自己也懒得改
直接写了,写一句我会解释一句
const path = require('path')
这一句的意思是引入nodejs的path模块因为我们后面会使用到
module.exports = {
mode: 'production',
这一句的意思是 告诉webpack我们要使用什么模式 有生产模式 和开发模式 分别为production and development
entry: {
main: './src/index.js',
sub: 'xxx.js'
}
这一句的意思是 告诉webpack 我们要从什么文件开始打包,我这里填写为src目录下面的index.js文件开始, 如果为对象即是打包多个文件的意思
output: {
这里面填写打包完成的文件放到什么地方
filename: 'mian.js',
这一句意思是打包完成后文件叫main.js
path: path.resolve(__dirname, 'dist')
这一句的意思是打包好的文件放到什么路径,我们这里填写dist目录下
},
module: {
这里面是告诉webpack我们如何打包除了js以外的文件
rules: [
这里面填写相应的规则
{
test: /\.png$/,
这一句的意思是要对png文件作出处理
use: {
loader: 'file-loader',
这里是告诉webpack 我们要处理的png使用file-loader模块处理
name: '[hash]_[name].[ext]',
这里是告诉webpack 我们需要输出的名称
outputPath: 'images/',
这里我们告诉webpack我们这个文件要输出的地址
}
},
{
test: /\.scss/,
这里设置sass文件打包设置
use: [
'style-loader',
'css-loader',
'sass-loader',
'postcss-loader'
这个loader的意思是要将打包的css进行浏览器适配处理
]
}
]
},
plugins: [
new HtmlWebpackplugin([
template: '/src/index.html'
这里是设置模版文件
]),
new CleanWebpackPlugin()
这个插件是帮助我们自动清理打包目录的
]
}