标签：路径问题 sed orm modules 热更新 compiler mit 扩展 accept
本文目标
从零搭建出一套支持react+less+typescript+mobx的webpack配置
首页要初始化yarn和安装webpack的依赖
yarn init -y
yarn add webpack webpack-cli -D
根目录下新建webpack.config.js文件，内容如下
const path = require(‘path‘); module.exports = { mode: ‘development‘, // 入口 这里应用程序开始执行 entry: path.resolve(__dirname, ‘src/index.tsx‘), // 出口 output: { // 输出文件的目标路径 path: path.resolve(__dirname, ‘dist‘), // 输出的文件名 filename: ‘bundle.js‘, // 输出解析文件的目录。静态资源最终访问路径 = output.publicPath + 资源loader或插件等配置路径 publicPath: ‘/‘ } }
使用命令进行打包
webpack --mode production
另外亦可以将命令配置到 package.json 中的 scripts 字段
"scripts": { "build": "webpack --mode production" },
执行命令 yarn build 即可打包
html-webpack-plugin 插件 可以指定template模板文件，将会在output目录下，生成html文件，并引入打包后的js.
安装依赖
yarn add html-webpack-plugin -D
在webpack.config.js增加plugins配置
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘); module.exports = { //...other code plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, ‘src/index.html‘) }) ] }
html-webpack-plugin 插件 还支持title、minify、filename等其他参数
webpack-dev-server提供了一个简单的Web服务器和实时热更新的能力，有助于开发。
安装依赖
yarn add webpack-dev-server -D
在webpack.config.js中增加devServer配置
const path = require(‘path‘); const HtmlWebpackPlugin = require(‘html-webpack-plugin‘); module.exports = { //...other code devServer: { hot: true, port: 3000, open: true, contentBase: path.resolve(__dirname, ‘dist‘), // 开发模式下写/就行啦 publicPath: ‘/‘, } }
在 package.json 的 scripts 字段中增加 start模式
"scripts": { "start": "webpack-dev-server --mode development", "build": "webpack --mode production" },
这样我们就可以通过yarn start来启动服务啦
通过使用不同的 style-loader 和 css-loader, 可以将 css 文件转换成js 文件类型。
安装依赖
yarn add style-loader css-loader -D
在webpack.config.js中增加loader配置
module.exports = { //other code module: { rules: [ { test: /\.css/, use: [‘style-loader‘, ‘css-loader‘], exclude: /node_modules/, include: path.resolve(__dirname, ‘src‘) } ] } }
loader 可以配置以下参数:
需要引入两个loader
如果希望图片存放在单独的目录下，那么需要指定outputPath
安装依赖
yarn add url-loader file-loader -D
在 webpack.config.js 中增加 loader 的配置(增加在 module.rules 的数组中)。
module.exports = { //other code module: { rules: [ { test: /\.(gif|jpg|png|bmp|eot|woff|woff2|ttf|svg)/, use: [ { loader: ‘url-loader‘, options: { limit: 8192, outputPath: ‘images‘ } } ] } ] } }
很多前端都喜欢写less，所以支持less也是需要的。（sass配置方法基本相同）
安装依赖
yarn add less less-loader -D
在 webpack.config.js 中增加 loader 的配置(module.rules 数组中)。
module.exports = { //other code module: { rules: [ { test: /\.less/, use: [‘style-loader‘, ‘css-loader‘, ‘less-loader‘], exclude: /node_modules/, include: path.resolve(__dirname, ‘src‘) }, ] } }
安装ES6/ES7/JSX 转义需要 Babel 的依赖，支持装饰器。
yarn add @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/plugin-proposal-decorators @babel/plugin-proposal-object-rest-spread -D
在 webpack.config.js 中增加 loader 的配置(module.rules 数组中)。
module.exports = { //other code module: { rules: [ { test: /\.jsx?$/, use: [ { loader: ‘babel-loader‘, options: { presets: [‘@babel/preset-env‘, ‘@babel/react‘], plugins: [ [ "@babel/plugin-proposal-decorators", { "legacy": true } ] ] } } ], include: path.resolve(__dirname, ‘src‘), exclude: /node_modules/ }, ] } }
安装依赖
yarn add uglifyjs-webpack-plugin -D
在 webpack.config.js 中增加 optimization 的配置
const UglifyWebpackPlugin = require(‘uglifyjs-webpack-plugin‘); module.exports = { //other code optimization: { minimizer: [ new UglifyWebpackPlugin({ parallel: 4 }) ] } }
因为CSS的下载和JS可以并行，当一个HTML文件很大的时候，可以把CSS单独提取出来加载
安装依赖
yarn add mini-css-extract-plugin -D
在 webpack.config.js 中增加 plugins 的配置,并且将 ‘style-loader‘ 修改为 { loader: MiniCssExtractPlugin.loader}。CSS打包在单独目录，那么配置filename。
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘); module.exports = { //other code module: { rules: [ { test: /\.css/, use: [{ loader: MiniCssExtractPlugin.loader}, ‘css-loader‘], exclude: /node_modules/, include: path.resolve(__dirname, ‘src‘) }, { test: /\.less/, use: [{ loader: MiniCssExtractPlugin.loader }, ‘css-loader‘, ‘less-loader‘], exclude: /node_modules/, include: path.resolve(__dirname, ‘src‘) }, ] }, plugins: [ new MiniCssExtractPlugin({ filename: ‘css/[name].css‘ }) ] }
安装依赖
yarn add optimize-css-assets-webpack-plugin -D
在 webpack.config.js 中的 optimization 中增加配置
const OptimizeCssAssetsWebpackPlugin = require(‘optimize-css-assets-webpack-plugin‘); module.exports = { //other code optimization: { minimizer: [ new OptimizeCssAssetsWebpackPlugin() ] } }
安装react依赖
yarn add react react-dom
安装mobx依赖
yarn add mobx mobx-react
安装依赖
yarn add typescript awesome-typescript-loader -D
安装react的类型依赖(否则会有命名空间和.d.ts相关报错)
yarn add @types/react @types/react-dom
在 webpack.config.js 中增加 loader 的配置(module.rules 数组中)。
module.exports = { //other code module: { rules: [ { test: /\.(tsx|ts)?$/, loader: "awesome-typescript-loader", exclude: /node_modules/, include: path.resolve(__dirname, ‘src‘) } ] } }
在根目录下添加tsconfig.json
{ "compilerOptions": { "baseUrl": ".", "outDir": "build/dist", "module": "esnext", "target": "es5", "lib": ["es6", "dom"], "sourceMap": true, "allowJs": true, "jsx": "react", "moduleResolution": "node", "experimentalDecorators": true, "rootDir": "./", "forceConsistentCasingInFileNames": true, "noImplicitReturns": true, "noImplicitThis": true, "noImplicitAny": false, "importHelpers": true, "strictNullChecks": true, "suppressImplicitAnyIndexErrors": true, "noUnusedLocals": false, "allowSyntheticDefaultImports": true }, "exclude": [ "node_modules", "build", "scripts", "acceptance-tests", "webpack", "jest", "src/setupTests.ts" ] }
在根目录下添加tslint.json
{ "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"], "rules": { "no-empty-interface":false, "no-empty-block":false, "no-unused-expression":false, "object-literal-sort-keys":false, "no-empty":false, "semicolon": [false, "always"], "no-default-export": false, "member-access": true, "ordered-imports": false, "import-sources-order": "any", "named-imports-order": "any", "interface-over-type-literal":false, "jsx-no-lambda":false, "variable-name": [ true, "ban-keywords", "check-format", "allow-leading-underscore", "allow-trailing-underscore", "allow-pascal-case", "allow-snake-case" ], "no-console": false, "no-angle-bracket-type-assertion": false, "jsx-no-string-ref":false, "prefer-for-of":false, "member-ordering":false, "only-arrow-functions":false, "object-literal-shorthand":false }, "linterOptions": { "exclude": [ "config/**/*.js", "node_modules/**/*.ts", "coverage/lcov-report/*.js" ] }, "strict": false }
安装依赖
yarn add clean-webpack-plugin -D
在 webpack.config.js 中增加 plugins 的配置
const {CleanWebpackPlugin} = require(‘clean-webpack-plugin‘);
module.exports = {
//other code
plugins: [
new CleanWebpackPlugin()
]
}
( 注意3.0版本的clean-webpack-plugin有大改动，需要通过构造函数取出CleanWebpackPlugin再用 )
至此，webpack配置已经基本能满足react+less+typescript+mobx开发需求。
webpack.config.js文件
const path = require(‘path‘); // 打包html的插件 const HtmlWebpackPlugin = require(‘html-webpack-plugin‘); // 压缩JS的插件 const UglifyWebpackPlugin = require(‘uglifyjs-webpack-plugin‘); // 分离css文件 const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘); // 打包前先清空输出目录 const {CleanWebpackPlugin} = require(‘clean-webpack-plugin‘); module.exports = { mode: ‘development‘, // 入口 这里应用程序开始执行 entry: path.resolve(__dirname, ‘src/index.tsx‘), // 出口 output: { // 所有输出文件的目标路径 path: path.resolve(__dirname, ‘dist‘), // 输出的文件名 filename: ‘bundle.js‘, // 输出解析文件的目录，url 相对于 HTML 页面， publicPath 上线时配置的是cdn的地址。 // 静态资源最终访问路径 = output.publicPath + 资源loader或插件等配置路径 publicPath: ‘./‘ }, devServer: { hot: true, port: 3000, open: true, contentBase: path.resolve(__dirname, ‘dist‘), publicPath: ‘/‘, // stats: ‘none‘ }, module: { rules: [ /* * 支持css * 通过使用不同的 style-loader 和 css-loader, 可以将 css 文件转换成JS文件类型。 * */ { test: /\.css/, // use: [‘style-loader‘, ‘css-loader‘], use: [ { loader: MiniCssExtractPlugin.loader }, ‘css-loader‘ ], exclude: /node_modules/, include: path.resolve(__dirname, ‘src‘) }, /* * 支持编译less和sass * */ { test: /.less/, // use: [‘style-loader‘, ‘css-loader‘, ‘less-loader‘], use: [ { loader: MiniCssExtractPlugin.loader }, ‘css-loader‘, ‘less-loader‘ ], exclude: /node_modules/, include: path.resolve(__dirname, ‘src‘) }, /* * 支持加载图片 * file-loader: 解决CSS等文件中的引入图片路径问题 * url-loader: 当图片小于limit的时候会把图片Base64编码，大于limit参数的时候还是使用file-loader进行拷贝 * */ { test: /\.(gif|jpg|png|bmp|eot|woff|woff2|ttf|svg)/, use: [ { loader: ‘url-loader‘, options: { limit: 1, outputPath: ‘images‘ } } ] }, /* * 支持转义 ES6/ES7/JSX ,支持react * ES6/ES7/JSX 转义需要 Babel 的依赖，支持装饰器。 * */ { test: /\.jsx?$/, use: [ { loader: "babel-loader", options: { presets: [‘@babel/preset-env‘, ‘@babel/react‘], plugins: [ [ "@babel/plugin-proposal-decorators", // "@babel/plugin-proposal-class-properties", { "legacy": true } ] ] } } ], exclude: /node_modules/, include: path.resolve(__dirname, ‘src‘) }, /* * 支持转义 支持typescript * ES6/ES7/JSX 转义需要 Babel 的依赖，支持装饰器。 * */ { test: /\.(tsx|ts)?$/, loader: "awesome-typescript-loader", exclude: /node_modules/, include: path.resolve(__dirname, ‘src‘) } ] }, optimization: { minimizer: [ new UglifyWebpackPlugin({ parallel: 4 }) ] }, plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, ‘public/index.html‘) }), new MiniCssExtractPlugin({ filename:‘css/[name].css‘ }), new CleanWebpackPlugin() ] };
package.json文件
{ "name": "webpack_cli", "version": "1.0.0", "main": "index.js", "license": "MIT", "scripts": { "start": "webpack-dev-server --mode development", "build": "webpack --mode production" }, "devDependencies": { "@babel/core": "^7.5.5", "@babel/plugin-proposal-decorators": "^7.4.4", "@babel/plugin-proposal-object-rest-spread": "^7.5.5", "@babel/preset-env": "^7.5.5", "@babel/preset-react": "^7.0.0", "@types/react": "^16.9.2", "@types/react-dom": "^16.8.5", "awesome-typescript-loader": "^5.2.1", "babel-loader": "^8.0.6", "clean-webpack-plugin": "^3.0.0", "css-loader": "^3.2.0", "file-loader": "^4.2.0", "html-webpack-plugin": "^3.2.0", "less": "^3.10.1", "less-loader": "^5.0.0", "mini-css-extract-plugin": "^0.8.0", "optimize-css-assets-webpack-plugin": "^5.0.3", "style-loader": "^1.0.0", "typescript": "^3.5.3", "uglifyjs-webpack-plugin": "^2.2.0", "url-loader": "^2.1.0", "webpack": "^4.39.2", "webpack-cli": "^3.3.7", "webpack-dev-server": "^3.8.0" }, "dependencies": { "mobx": "^5.13.0", "mobx-react": "^6.1.3", "react": "^16.9.0", "react-dom": "^16.9.0" } }
学习更多webpack配置请进入webpack官网 webpack官网链接
本文配置将持续升级优化
从零配置webpack(react+less+typescript+mobx)
标签：路径问题 sed orm modules 热更新 compiler mit 扩展 accept
原文地址：https://www.cnblogs.com/piaobodewu/p/11374475.html
