React从入门到放弃之前奏(1):webpack4简介
接触webpack是好久之前的事情了,最近看了下webpack没想到都到4了。
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).
会创建1个依赖关系图(dependency graph),包含所有依赖的模块,然后将模块打包成1个或多个bundle.
webpack4 仍然支持高度可配,但完全可以不用配置文件了(基于mode)。
安装
淘宝源:npm config set registry https://registry.npm.taobao.org
升级npm:npm i npm -g
安装webpack:npm i -D webpack webpack-cli webpack-dev-server
运行webpack:npx webpack
(Node 8.2+ 版本提供的npx
命令)
基本特性
核心配置:
- 入口(entry):
- 输出(output):
- loader:
- 插件(plugins):
Entry
入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。
可以通过在 webpack 配置中配置 entry 属性,来指定一个入口起点(或多个入口起点)。默认值为 ./src/index.js
webpack.config.js
module.exports = {
entry: {
main: './src/index.js'
},
};
Output
output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为./dist/[name].js
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
}
};
Loader
loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。
loaders 有2个核心参数:
- test 属性,用于标识出需要转换的某个或某些文件。
- use 属性,表示进行转换时,应该使用哪个 loader。
const path = require('path');
const config = {
output: {
filename: 'bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};
module.exports = config;
Plugins
插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
const config = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;
Mode
通过选择 development 或 production 之中的一个,来设置 mode 参数
webpack.config.js
module.exports = {
mode: 'production'
};
mode.js
// webpack.development.config.js
module.exports = {
+ mode: 'development'
- plugins: [
- new webpack.NamedModulesPlugin(),
- new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
- ]
}
// webpack.production.config.js
module.exports = {
+ mode: 'production',
- plugins: [
- new UglifyJsPlugin(/* ... */),
- new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
- new webpack.optimize.ModuleConcatenationPlugin(),
- new webpack.NoEmitOnErrorsPlugin()
- ]
}
常用插件
HtmlWebpackPlugin:
const HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlWebpackPlugin({ template: 'src/index.html', minify: true, hash: true })
CleanWebpackPlugin:
const CleanWebpackPlugin = require('clean-webpack-plugin');
new CleanWebpackPlugin(['dist'])
MiniCssExtractPlugin(ExtractTextPlugin):
new MiniCssExtractPlugin({ filename: "[name].css",chunkFilename: "[id].css" })
module: {
rules: [{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]}
]
}
SplitChunksPlugin:
module.exports = {
mode: 'development',
entry: {
main: './src/index.js',
vendors: 'lodash'
},
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
chunks: "initial"
}
}
}
}
}
配置示例
package
package.json
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open",
"build": "webpack --config webpack.prod.js"
},
"devDependencies": {
"babel-loader": "^7.1.4",
"babel-preset-react": "^6.24.1",
"babel-plugin-import": "^1.7.0",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.0",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4"
},
"dependencies": {
"antd": "^3.5.2",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"express": "^4.16.3",
"lodash": "^4.17.10",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-loadable": "^5.4.0",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-promise": "^0.6.0",
"redux-saga": "^0.16.0",
"redux-thunk": "^2.2.0"
}
}
开发环境
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path');
module.exports = {
mode: 'development',
entry: {
main: './src/index.js',
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
},
module: {
rules: [{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}, {
test: /\.(js|jsx)$/,
loader: 'babel-loader',
options: {
presets: ['react'],
plugins: [
["import", { "libraryName": "antd", "style": "css" }]
]
},
exclude: /node_modules/
}]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({ minify: true, hash: true }),
new MiniCssExtractPlugin({ filename: "[name].css", chunkFilename: "[id].css" })
],
optimization: {
splitChunks: {
cacheGroups: {
common: {
test: /[\\/]node_modules[\\/]/,
name: "common",
chunks: "initial",
enforce: true
},
}
}
}
};
生产环境
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path');
module.exports = {
mode: 'production',
entry: {
main: './src/index.js',
},
devtool: 'source-map',
devServer: {
contentBase: './dist',
host: '192.168.0.75'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
},
module: {
rules: [{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}, {
test: /\.(js|jsx)$/,
loader: 'babel-loader',
options: {
presets: ['react'],
plugins: []
},
exclude: /node_modules/
}]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({ template: 'src/index.html', minify: true, hash: true }),
new MiniCssExtractPlugin({ filename: "[name].css", chunkFilename: "[id].css" })
],
externals: {
lodash: '_',
react: 'React',
'react-dom': 'ReactDOM',
antd: 'antd'
},
optimization: {
splitChunks: {
cacheGroups: {
common: {
test: /[\\/]node_modules[\\/]/,
name: "common",
chunks: "initial",
enforce: true
},
}
}
}
};
React从入门到放弃之前奏(1):webpack4简介的更多相关文章
- React从入门到放弃之前奏(5):ReactRouter4
概念 安装:npm i -S react-router react-router-dom GitHub:ReactTraining/react-router React Router中有三种类型的组件 ...
- React从入门到放弃之前奏(2):React简介
本系列将尽可能使用ES6(ES2015)语法.所以均在上节webpack的基础上做开发. React是Facebook开发的一款JS库,因为基于Virtual DOM,所以响应速度快,以及支持跨平台. ...
- React从入门到放弃之前奏(3):Redux简介
安装 npm i -S redux react-redux redux-devtools 概念 在redux中分为3个对象:Action.Reducer.Store Action 对行为(如用户行为) ...
- React从入门到放弃之前奏(4):Redux中间件
redux 提供了类似后端 Express 的中间件概念. 最适合扩展的是redux中的 store.dispatch 方法,中间件实际就是通过 override redux的store.dispat ...
- 在 2016 年学 JavaScript 是一种什么样的体验?(React从入门到放弃)
jquery 年代 vs 前端模块化 http://blog.csdn.net/offbye/article/details/52793921 ++ 嘿,我最近接到一个 Web 项目,不过老实说,我这 ...
- ubuntu-docker入门到放弃(七)Dockerfile简介
一.dockerfile基本结构 最简单的理解就是dockerfile实际上是一些命令的堆叠,有点像最基础的shell脚本,没有if 没有for,就是串行的一堆命令. 一般而言,dockerfile分 ...
- D3.js从入门到“放弃”指南
前言 近期略有点诸事不顺,趁略有闲余之时,玩起D3.js.之前实际项目中主要是用各种chart如hightchart.echarts等,这些图形库玩起来貌都是完美的,一切皆可配置,但几年前接触了D3之 ...
- 一天带你入门到放弃vue.js(一)
写在前面的话! 每个新的框架入手都会进行一些列的扯犊子!这里不多说那么多!简简单单说一下vue吧! Vue.js是目前三大框架(angular,vue,react)之一,是渐进式js框架,据说是摒弃了 ...
- 小白学 Python 爬虫(28):自动化测试框架 Selenium 从入门到放弃(下)
人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...
随机推荐
- centos vsftpd 553 Could not create file解决方法
centos vsftpd 553 Could not create file解决方法 问题由于selinux引起的,问题解决办法: www.2cto.com 输入:getsebool - ...
- 给Cocos2D视图添加手势支持
见如下代码: UISwipeGestureRecognizer *swipeLeft = [[UISwipeGestureRecognizer alloc]initWithTarget:self ac ...
- 为什么选择Nginx
Nginx 是一个高性能的 Web 和反向代理服务器, 它具有有很多非常优越的特性: 作为 Web 服务器:相比 Apache,Nginx 使用更少的资源,支持更多的并发连接,体现更高的效率,这 ...
- vector的简易实现
vector的简易实现整理自<数据结构与算法分析–C++描述(第3版)>3.4节“向量的实现”.详细可参考<STL源码分析>4.2节. 具体实现代码如下: #ifndef VE ...
- Android MTK平台最完备的开机动画修改教程
修改手机的开机动画不是什么难事儿. 但修改一款很冷门的"山寨机",就不太好修改第一屏了. 手机是MTK的一款手机,虽然比较贵(价格超过三星Note3),但在我看来跟山寨机木有啥区别 ...
- Android实现RecyclerView侧滑删除和长按拖拽-ItemTouchHelper
RecyclerView这个被誉为ListView和GirdView的替代品,它的用法在之前的一篇博文中就已经讲过了,今天我们就来实现RecyclerView的侧滑删除和长按拖拽功能,实现这两个功能我 ...
- ExtJS:菜单ComboBox及级联菜单应用
首页一级菜单查询分组,二级菜单查询分组中的车辆信息. 定义分组数据模型: Ext.define( 'group', { extend:'Ext.data.Model', fields:[ {name: ...
- ARM linux常用汇编语法
汇编语言每行的语法: lable: instruction ; comment 段操作: .section 格式: .section 段名 [标志] [标志]可以 ...
- 熊猫猪新系统测试之一:Windows 10 技术预览版
话说本猫不用windows很多年了呀!不过看到微软最新的Windows10还是手痒了,想安装体验一把.于是第一时间下载,并做成usb引导安装镜像,在08年的老台式机上安装尝鲜鸟.下载ISO和安装方法这 ...
- centos下 redmind2.6安装
1.下载安装redmind有关软件 cd /tmp wget http://cache.ruby-lang.org/pub/ruby/2.1/ruby-2.1.5.tar.gz wget http:/ ...