使用webpack已经有些年头了,可是对于其中的一些基本配置仍是只知其一;不知其二。为了成为一名优秀的webpack配置工程师,也是学习了一把webpack,react的配置,特分享这次经历,并记录当中遇到的一些问题。固然如今的配置只是很基础的,但愿在之后的工做经历中,多多探索,把一些webpack优化,react,redux最佳实践,都加入到其中。javascript
学习一个新技术,最好的获取方式即是阅读官方文档。(https://www.webpackjs.com/gui...)。通读之后,总结为如下几个要点。css
npm init -y npm install webpack webpack-cli --save-dev
// webpack.base.js const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: '[name].bundle.js', path: path.resolve(__dirname, '../dist'), }, }; // package.json "scripts": { "dev": "webpack --config webpackconfig/webpack.base.js", }, // dist/index.html <!doctype html> <html> <head> <title>hyt</title> </head> <body> <script src="./main.bundle.js"></script> </body> </html> // src/index.js function component() { var element = document.createElement('div'); element.innerHTML = 'hello world hyt'; return element; } document.body.appendChild(component());
固然,避免咱们每次手动去清空dist文件下的内容,可使用clean-webpack-plugin插件帮助清空。html
npm install html-webpack-plugin clean-webpack-plugin // webpack.base.js const path = require('path'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { filename: '[name].bundle.js', path: path.resolve(__dirname, '../dist'), }, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: 'Output Management' }) ], };
这里能够看到,HtmlWebpackPlugin已经帮助咱们生成了html文件。java
可是在平常开发中,每次修改完代码都须要手动执行webpack打包命令,很繁琐。这时候能够采用 watch或者webpack-dev-server或者webpack-dev-middleware方法实现。较为经常使用的是使用webpack-dev-server,不只提供一个简单的 web 服务器,而且可以实时从新加载。node
npm install --save-dev webpack-dev-server const path = require("path"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/index.js", output: { filename: "[name].bundle.js", path: path.resolve(__dirname, "../dist"), }, devServer: { contentBase: './dist', open: true, port: 8888, }, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: "Output Management", }), ], };
修改package.jsonreact
"scripts": { "dev": "webpack-dev-server --config webpackconfig/webpack.base.js", "watch": "webpack --config webpackconfig/webpack.base.js --watch" },
执行 npm run dev,看看效果。webpack
webpack.base.js
是通用配置,webapck.dev.js
中是开发环境配置,webapck.prod.js
是生产环境配置。webpack-merge
能够帮住咱们很好的合并配置。nginx
接下来拆分配置:git
// webpack.base.js const path = require("path"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/index.js", output: { filename: "[name].bundle.js", path: path.resolve(__dirname, "../dist"), }, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: "Output Management", }), ], };
// webpack.dev.js const { merge } = require("webpack-merge"); const base = require("./webpack.base"); module.exports = merge(base, { mode: "development", devtool: "inline-source-map", devServer: { contentBase: "./dist", open: true, port: 8888, }, });
const { merge } = require("webpack-merge"); const webpack = require("webpack"); const base = require("./webpack.base"); module.exports = merge(base, { mode: "production", devtool: "source-map", plugins: [ new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production"), }), ], });
// package.json "scripts": { "dev": "webpack-dev-server --config webpackconfig/webpack.dev.js", "watch": "webpack --config webpackconfig/webpack.base.js --watch", "prod": "webpack --config webpackconfig/webpack.prod.js" },
到目前为止,一个小型的webpack打包应用已经构建好了。接下来进入webpack应用中,引入react, css, less的处理。github
npm install react react-domm
修改src/index.js,改成react组件格式代码。
import React from "react"; import ReactDOM from "react-dom"; const App = () => { return <div>hello world hyt</div>; }; ReactDOM.render(<App />, document.getElementById("root"));
由于react-dom的渲染节点,须要挂在已经存在的id=root节点上,因此咱们须要在生成的index.html中提早写入 root节点。此操做能够搭配以前提到的HtmlWebpackPlugin完成。添加template模板。
// src/template.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <div id="root"></div> </body> </html> // webpack.base.js new HtmlWebpackPlugin({ title: 'hyt Management', template: './src/template.html', }),
接下来运行,npm run dev,果真,报错了。
提示咱们,应该须要专门的loader去处理咱们的js/jsx文件。这时候,就是大名鼎鼎的babel登场了。babel能够帮助咱们进行js文件的编译转换。
除了帮助咱们对于高版本js语法转换之外,还能够处理react的jsx写法。
npm install babel-loader @babel/preset-env @babel/preset-react @babel/core
更改webpack.base.js中rules规则。
module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: [{ loader: "babel-loader" }], }, ], },
根目录新增.babelrc配置文件
{ "presets": ["@babel/preset-env", "@babel/preset-react"] }
接下来打包运行,npm run dev ,发现浏览器中终于显示了<div>hello world hyt</div>
的dom(为了显示一行dom,咱们费了这么大的功夫,不得不吐槽)。
有了刚才js打包报错的经验,应该明白,要想加入css文件,也须要有专门的loader去处理css文件,得以运行。
npm install css-loader style-loader
css-loader处理css文件为webpack可识别打包的,style-loader插入到页面style中。
rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: [{ loader: "babel-loader" }], }, { test: /\.css$/, use: [ { loader: "style-loader", }, { loader: "css-loader", }, ], }, ]
// src/index.js import "./style.css"; const App = () => { return <div className="hello">hello world hyt</div>; }; // src/style.css .hello { font-size: 30px; color: blue; }
嗯,能够看到页面中有颜色了。。
这时候思考一个问题,假如在咱们其余组件中,也有一样名字的class,再其对应的css文件中,写了不一样的样式,会有什么结果,实验一下。
// src/components/about/index.js import React from "react"; import "./style.css"; const About = (props) => { return <div className="hello">About</div>; }; export default About;
// src/components/about/style.css .hello { color: red; }
// src/index.js import About from "./components/about"; <About />
看下页面的展现,
发现color: red的样式并无生效,打开控制台看下打包后的样式,名字同样的class,样式被覆盖了。
因此这个时候,就引入css modules的概念了,经过css-loader的配置,帮助咱们实现css模块化。
{ test: /\.css$/, use: [ { loader: "style-loader", }, { loader: "css-loader", options: { modules: { localIdentName: "[name]__[local]--[hash:base64:5]", // css-loader >= 3.x,localIdentName放在modules里 }, }, }, ], }
更改js文件中引入方式。
import style from "./style.css"; const About = (props) => { return <div className={style["hello"]}>About</div>; }; index.js中同理
emm,样式果真生效了
既然都用到css了,和不使用使用预处理less呢,可以更加提效咱们的开发。使用步骤和css大体相同,秩序多家less-loader先把less文件作一次转换,再走css-loader的流程。大概配置以下
npm install less-loader { test: /\.less$/, use: [ { loader: "style-loader", // creates style nodes from JS strings }, { loader: "css-loader", // translates CSS into CommonJS options: { modules: { localIdentName: "[name]__[local]--[hash:base64:5]", // css-loader >= 3.x,localIdentName放在modules里 https://github.com/rails/webpacker/issues/2197 }, }, }, { loader: "less-loader", // compiles Less to CSS options: { lessOptions: { javascriptEnabled: true },// less@3.x,须要开启 配置项 javascriptEnabled: true }, }, ], },
把About中的css文件改成less使用便可。接下来能够安心的写代码了。
为了提升咱们的开发效率,在项目中引入antd组件库。
两种方法,全量引入css;或按需加载。(antd 4.x 的 JS 代码默认支持基于 ES modules 的 tree shaking。)https://ant.design/docs/react...
采用按需加载的方法来构建项目。
npm install antd babel-plugin-import { "presets": ["@babel/preset-env", "@babel/preset-react"], "plugins": [ [ "import", { "libraryName": "antd", "libraryDirectory": "es", "style": true // `style: 'css'` 会加载 css 文件 } ] ] }
发现样式并无加载成功。
缘由是咱们刚才在处理less文件时,没有区分src 和 node_modules,致使antd的class也加了modules,没有加载到正确的样式。修改less loader为
{ test: /\.less$/, exclude: /node_modules/, // 这里作了修改 use: [ { loader: "style-loader", // creates style nodes from JS strings }, { loader: "css-loader", // translates CSS into CommonJS options: { modules: { localIdentName: "[name]__[local]--[hash:base64:5]", // css-loader >= 3.x,localIdentName放在modules里 https://github.com/rails/webpacker/issues/2197 }, }, }, { loader: "less-loader", // compiles Less to CSS options: { lessOptions: { javascriptEnabled: true }, }, }, ], }, { test: /\.less$/, include: /node_modules/, // 这里作了修改 use: [ { loader: "style-loader", // creates style nodes from JS strings }, { loader: "css-loader", // translates CSS into CommonJS }, { loader: "less-loader", // compiles Less to CSS options: { lessOptions: { javascriptEnabled: true }, }, // less@3.x,须要开启 配置项 javascriptEnabled: true, less-loader高版本须要lessOptions。 }, ], },
接下来引入React-Router实现单页面应用。
具体用法可参考 https://reacttraining.com/rea...
npm install react-router-dom
修改index.js文件
import { BrowserRouter } from "react-router-dom"; import Routes from "./Routes"; const App = () => { return ( <BrowserRouter> <Routes /> </BrowserRouter> ); };
新建Routes.js
import React from "react"; import { Switch, Route, Link, Redirect } from "react-router-dom"; import About from "./components/about"; import User from "./components/user"; const Routes = () => { return ( <div> <nav> <ul> <li> <Link to="/about">About</Link> </li> <li> <Link to="/user">User</Link> </li> </ul> </nav> <Switch> <Route path="/about" component={About} /> <Route path="/User" component={User} /> <Redirect to="/about" /> </Switch> </div> ); }; export default Routes;
注意咱们使用的是BrowserRouter,本地开发webpack devserver须要开启 historyApiFallback: true, 生产环境能够在nginx端try_files。
单页面应用ok了,接下来引入react-redux去管理咱们的数据流。
为何选择redux来管理咱们的数据流,以及redux的设计原理,能够查看阮一峰老师的系列文章,这里只给出基本使用。http://www.ruanyifeng.com/blo...
几个比较重要的概念,Provider,connect, creatStore, reducer, applyMiddleware,actions。
继续改造文件结构及内容
npm install redux react-redux
// src/store.js import { createStore } from "redux"; import reducers from "./reducers/index"; const store = createStore(reducers, {}); export default store;
// src/reducers/index.js import { combineReducers } from "redux"; const initialState = { name: "hyt", }; function home(state = initialState, action) { switch (action.type) { case "TEST_REDUCER": return { ...state, }; default: return state; } } export default combineReducers({ home, });
// src/index.js import { Provider } from "react-redux"; import Routes from "./Routes"; import store from "./store"; const App = () => { return ( <Provider store={store}> <BrowserRouter> <Routes /> </BrowserRouter> </Provider> ); };
新建容器组件container/home.js
import React from "react"; import { connect } from "react-redux"; const Home = (props) => { return <div>Home,{props.data.name}</div>; }; export default connect((state) => ({ data: state.home }))(Home);
import Home from "./containers/home"; const Routes = () => { return ( <div> <nav> <ul> ... <li> <Link to="/home">Home</Link> </li> </ul> </nav> <Switch> ... <Route path="/home" component={Home} /> <Redirect to="/about" /> </Switch> </div> ); };
这是路由localhost:8080/home下就能够显示出 hello,hyt的数据。
上面已经获取到了store中的数据,接下来dispatch去改变store中的数据,因为组件订阅了store(connect),页面数据源会自动渲染变动。
6.1 添加action types常量
// src/constants/actionTypes.js export const SET_USER_NAME = "SET_USER_NAME";
6.2 改变store的action
// src/actions/homeAction.js import { SET_USER_NAME } from "../constants/actionsType"; export function setName(payload) { return { type: SET_USER_NAME, payload }; }
6.3 接受actions的reducer
// src/reducers/index.js import { SET_USER_NAME } from "../constants/actionsType"; const initialState = { name: "hyt", }; function home(state = initialState, action) { switch (action.type) { case SET_USER_NAME: return { ...state, name: action.payload.name, }; default: return state; } }
6.4 组件触发actions。增长了mapDispatchToProps。props.setName()
// src/containers/home.js import React, { useEffect } from "react"; import { connect } from "react-redux"; import { setName } from "../actions/homeAction"; const Home = (props) => { useEffect(() => { setTimeout(() => { props.setName({ name: "wjh", }); }, 3000); }, []); return <div>Home,{props.data.name}</div>; }; const mapDispatchToProps = { setName, }; export default connect( (state) => ({ data: state.home }), mapDispatchToProps )(Home);
如今页面中的,hello,hyt 会在三秒后变成 hello,wjh。
六. redux中间件,thunk/saga
如今咱们处理的是同步数据,接下来咱们引入redux中间件,去处理异步action函数。
修改store,
npm install redux-thunk
// src/store.js import { createStore, applyMiddleware } from "redux"; import thunk from "redux-thunk"; import reducers from "./reducers/index"; const store = createStore(reducers, {}, applyMiddleware(thunk)); export default store;
// src/actions/homeAction.js export function getName(payload) { return (dispatch) => { return Promise.resolve().then((res) => { dispatch({ type: SET_USER_NAME, payload: { name: "fetch mock", }, }); return res; }); }; }
// src/containers/home.js const Home = (props) => { useEffect(() => { setTimeout(() => { // props.setName({ // name: "wjh", // }); props.getName(); }, 3000); }, []); return <div>Home,{props.data.name}</div>; }; const mapDispatchToProps = { setName, getName, };
页面上已经变成了 hello,fetch mock.
saga的使用能够直接参考 https://github.com/hytStart/J...
npm install react-loadable
修改Routes中组件引入方式,达到按路由拆分
js模块
import Loadable from "react-loadable"; const MyLoadingComponent = (props) => { if (props.pastDelay) { return <div>Loading...</div>; } return null; }; const User = Loadable({ loader: () => import("./components/user"), loading: MyLoadingComponent, delay: 300, });
能够看到控制台js bundle加载。
因为如今咱们每改一下代码,均可以看到刷新一次页面,因而以前的路由跳转状态、表单中填入的数据都会重置。对于开发人员过程很不方便,这时候就引出咱们的热更新了,不会形成页面刷新,而是进行模块的替换。
// webpack.dev.js module.exports = merge(base, { mode: "development", devtool: "inline-source-map", devServer: { contentBase: "./dist", open: true, port: 8888, historyApiFallback: true, hot: true, // +++++++ }, });
// index.js const App = () => { return ( <Provider store={store}> <BrowserRouter> <Routes /> </BrowserRouter> </Provider> ); }; ++++ if (module.hot) { module.hot.accept(); } ++++ ReactDOM.render(<App />, document.getElementById("root"));
如今咱们的项目中尚未专门的loader去处理图片,
file-loader 能够指定要复制和放置资源文件的位置,以及如何使用版本哈希命名以得到更好的缓存。此外,这意味着 你能够就近管理图片文件,可使用相对路径而不用担忧部署时 URL 的问题。使用正确的配置,webpack 将会在打包输出中自动重写文件路径为正确的 URL。
url-loader 容许你有条件地将文件转换为内联的 base-64 URL (当文件小于给定的阈值),这会减小小文件的 HTTP 请求数。若是文件大于该阈值,会自动的交给 file-loader 处理。
增长以下配置
npm install file-loader url-loader // webpack.base.js { test: /\.(mp4|ogg)$/, use: [ { loader: 'file-loader', }, ], }, { test: /\.(png|jpg|jpeg|gif|eot|svg|ttf|woff|woff2)$/, use: [ { loader: 'url-loader', options: { limit: 8192, }, }, ], },
该插件将CSS提取到单独的文件中。它为每一个包含CSS的JS文件建立一个CSS文件。它支持CSS和SourceMap的按需加载。
4.1 使用mini-css-extract-plugin
npm install --save-dev mini-css-extract-plugin
修改webpack.base.js中关于css,
less的配置,替换掉style-loader(不在须要把style插入到html中,而是经过link引入)。
{ test: /\.css$/, use: [ // { // loader: "style-loader", // }, { loader: MiniCssExtractPlugin.loader, options: { esModule: true, hmr: process.env.NODE_ENV === "dev", reloadAll: true, }, }, { loader: "css-loader", options: { modules: { localIdentName: "[name]__[local]--[hash:base64:5]", // css-loader >= 3.x,localIdentName放在modules里 https://github.com/rails/webpacker/issues/2197 }, }, }, ], }, { test: /\.less$/, exclude: /node_modules/, use: [ // { // loader: "style-loader", // creates style nodes from JS strings // }, { loader: MiniCssExtractPlugin.loader, options: { esModule: true, hmr: process.env.NODE_ENV === "dev", reloadAll: true, }, }, { loader: "css-loader", // translates CSS into CommonJS options: { modules: { localIdentName: "[name]__[local]--[hash:base64:5]", // css-loader >= 3.x,localIdentName放在modules里 https://github.com/rails/webpacker/issues/2197 }, }, }, { loader: "less-loader", // compiles Less to CSS options: { lessOptions: { javascriptEnabled: true }, }, }, ], }, { test: /\.less$/, include: /node_modules/, use: [ // { // loader: "style-loader", // creates style nodes from JS strings // }, { loader: MiniCssExtractPlugin.loader, options: { esModule: true, hmr: process.env.NODE_ENV === "dev", reloadAll: true, }, }, { loader: "css-loader", // translates CSS into CommonJS }, { loader: "less-loader", // compiles Less to CSS options: { lessOptions: { javascriptEnabled: true }, }, // less@3.x,须要开启 配置项 javascriptEnabled: true, less-loader高版本须要lessOptions。 }, ], },
4.2 如上配置,增长hrm配置
hmr: process.env.NODE_ENV === "dev"
同时在package.json scripts中注入环境变量
"scripts": { "dev": "NODE_ENV=dev webpack-dev-server --config webpackconfig/webpack.dev.js", "watch": "NODE_ENV=dev webpack --config webpackconfig/webpack.base.js --watch", "prod": "webpack --config webpackconfig/webpack.prod.js" },
4.3 plugin配置
plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: "Output Management", template: "./src/template.html", }), new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both options are optional filename: "[name].css", chunkFilename: "[id].css", }), ],
到目前为止,咱们已经根据引入文件的方式,分离除了css,作到了按需加载。可是如今能够查看打包出来的css文件是没有通过压缩的。
4.4 增长optimize-css-assets-webpack-plugin来压缩css代码,可是这时又会出现另一个问题,optimization.minimizer会覆盖webpack提供的默认设置,所以还需增长terser-webpack-plugin来压缩js代码。
npm install --save-dev optimize-css-assets-webpack-plugin terser-webpack-plugin
// webapack.base.js const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); const TerserJSPlugin = require("terser-webpack-plugin"); plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: "Output Management", template: "./src/template.html", }), new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both options are optional filename: "[name].css", chunkFilename: "[id].css", }), ], optimization: { minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})], },
https://webpack.docschina.org...
mode: 'production'