webpack4配置react开发环境
webpack4大大提高了开发效率,简化了配置复杂度,作为一个大的版本更新,作为一个对开发效率执着的爱折腾的程序员,已经忍不住要尝尝鲜了
首先是cli和webpack的分离,开发webpack应用程序需要安装一些开发依赖
webpack
webpack-cli
webpack-dev-server
babel-loader, babel-core, babel-preset-env, babel-preset-react
css-loader less-loader style-loader less ( 如果是sass的话安装 sass-loader和node-sass )
file-loader
yarn add webpack webpack-cli webpack-dev-server less less-loader style-loader css-loader babel-loader babel-core babel-preset-react babel-preset-env file-loader --save --dev
安装好之后开始配置webpack
mode
4.0版本添加了一个mode参数
development 或者 production,直接设置这两个参数,可以省去配置一些插件,但是也可以设置为 none,插件也可以自己手动配置
如果是development的话,相当于旧版本的
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.DefinePlugin({ "process.env.NODE_ENV":JSON.stringify("development") }),
]
如果是production 的话,相当于旧版本的
plugins: [
new UglifyJsPlugin(/* ... */),
new webpack.DefinePlugin({ "process.env.NODE_ENV":JSON.stringify("production") }),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
入口和出口
旧版本中需要配置入口文件和出口文件,新版本如果不执行入口和出口,那么默认的配置就会和下边一样
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'main.js'
}
}
零配置
因为很多都有默认值了,所以我们可以实现零配置
以上我们可以认为通过如下命令来实现
webpack --mode=development
loader
略有些复杂的loader配置可能会比较麻烦,如果用命令行实现也可以,但会执行一条很长的命令
注意loader的顺序是不能乱的,比如css 需要先通过 css-loader 然后 style-loader写到页面内, 也就是说在 use 里是反着写的
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
test: /\.(js|jsx)$/,
use: ['babel-loader']
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: ['file-loader']
}
]
}
devServer
webpack-dev-server 可以快速让网站运行在一个 express 作为后台的虚拟服务器上,这样也可以实现很多开发的便利,比如热更新,浏览器实时刷新
主要参数
最新文章
- iOS开发之多表视图滑动切换示例(仿";头条";客户端)---优化篇
- JS倒计时功能,给定时间返回规定格式倒计时时间
- 通过Android录音进行简单音频分析
- 阿里前CEO卫哲用自己10余年经历,倾诉B2B的三差、四率、两大坑
- css背景图片定位练习(一)
- Java Volatile关键字
- soap 路由
- JAVA(2)——JDBC
- 百度的一个Ajax跨域方法 JavaScript是没有域的限制
- TortoiseSVN上次文件显示被锁定
- NSIS:超级轻量皮肤SkinH
- 相对于C#,PHP中的个性化语法
- IE兼容问题及处理
- CentOS安装并设置MariaDB
- java中new关键字和newInstance()方法的区别
- 【arc071f】Infinite Sequence(动态规划)
- Linux 的基本操作(系统用户及用户组的管理)
- JAVA记录-SpringMVC scope属性的两种模式
- mysql_结构
- SCRUM 12.17