react v16 + webpack v4
2018-12-07 本文已影响0人
Mr君
概述：本文涉及到的内容
react v16 + redux + react-router v4 + webpack v4
npm install -g create-react-app
create-react-app webpack-react//创建react projects 命名为webpack-react名字自定义
cd webpack-react
注意一定要将webpack、webpack-cli和webpack-dev-server三者一起安装否则可能产生兼容问题，报错Cannot find module 'webpack-cli/bin/config-yargs'
//安装webpack依赖项，webpack运行需要的一些依赖项
npm install webpack webpack-cli webpack-dev-server --save-dev
//安装es6转码器，es6的一些新语法特性旧版本的浏览器识别不了，需要通过转码器将其转换成es5语法。
npm i babel-core babel-loader babel-preset-env --save-dev
创建文件目录
image.png
配置webpack.base.config.js文件
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//html插件，需要安装依赖项 npm install htmp-webpack-plugin --save-dev
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//压缩css文件
module.exports = {
entry: {
main: path.join(__dirname, "../src/index.js"), //入口文件
common: ['react', 'react-dom']
},
output: {
path: path.join(__dirname, "../build"),//出口文件
filename: "[name].js",
},
resolve: {
extensions: ['.js', '.jsx', 'json', '.css'], //需要编译的文件类型
},
performance: {
hints: false
},
module: {
rules: [
{
test: /\.(js|jsx)?$/,
exclude: /(node_modules)/,
loader: 'babel-loader' //jsx js转码配置
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'], //css转码，需要安装依赖项css-loader
},
{
test: /\.(scss|sass)$/,
use: [
// 与style-loader冲突，被放弃
// MiniCssExtractPlugin.loader,
{
loader: "style-loader" // translates CSS into CommonJS
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "sass-loader" // compiles Sass to CSS
}]
},
{
test: /\.html$/, use: [{ loader: 'html-loader', options: { minimize: true } }]
},
{
test: /\.(ico)$/, use: "raw-loader", //加载ico文件
},
{
test:/\.(svg|png)$/, use:'file-loader', //加载文件
}
]
},
plugins:[
new HtmlWebpackPlugin({ filename: "index.html", template: path.join(__dirname, "../public/index.html") }),
new MiniCssExtractPlugin({ filename: "[name].css", chunkFilename: "[id].css" })
]
}
这里注意：
webpack.base.config.js作为开发和生产环境共用的配置文件，其引用的MiniCssExtractPlugin在开发环境中使用没有问题，但是打包到生产环境中的时候，打包后的css内容类名编译后存在问题。
百度了一下：mini-css-extract-plugin的作用用于将CSS提取到单独的文件中。即在js文件中引入的css文件，可以使css和js群文件一样按需加载，而不必一次性加载整个css样式。这种方法会最终产生一个单独的css文件，并加载。注意在使用这种方法需要在发布打包时指定 css 压缩库配置，并且需要同时写入 js 压缩库，因为你一旦指定了 optimization.minimizer 就会弃用内置的代码压缩。
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader?importLoaders=1',
'postcss-loader',
'sass-loader'
]
}
上面文件中用到的方法，css-loader用于解析css，style-loader用于将css插入html文档中，最终是将css打包到js内部。
配置webpack.dev.config.js文件
const webpack = require("webpack");
const path = require("path");
const merge = require("webpack-merge");//文件合并
const webpackConfigBase = require("./webpack.base.config");
const openBrowserPlugin = require('open-browser-webpack-plugin');//在浏览器中打开程序
const webpackConfigDev = {
mode:'development',
plugins:[
// new openBrowserPlugin({url:"http://localhost:8080"})
],
devServer:{
contentBase: path.join(__dirname,"../public"),
hot: true,
host:'0.0.0.0',
inline: true,
port: 8080,
}
}
module.exports = merge(webpackConfigBase, webpackConfigDev);
配置webpack.prod.config.js文件
const webpack = require("webpack");
const path = require("path");
const webpackConfigBase = require("./webpack.base.config");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const merge = require("webpack-merge");
const webpackConfigProd = {
mode: "production",
plugins:[
new CleanWebpackPlugin(["build"],{
root: path.join(__dirname,"../")
})
]
};
module.exports = merge(webpackConfigBase, webpackConfigProd);
//webpack中用到的一些插件以及转码器需要自己安装
配置package.json文件
{
"name": "webpack-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/runtime": "^7.0.0",
"babel-runtime": "^6.26.0",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-redux": "^5.1.1",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.1",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "webpack-dev-server --hot --inline --color --config ./webpack/webpack.dev.config.js",
"build": "webpack --config ./webpack/webpack.prod.config.js",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"@babel/core": "^7.1.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"@babel/preset-stage-0": "^7.0.0",
"babel-loader": "^8.0.2",
"babel-plugin-import": "^1.11.0",
"babel-preset-mobx": "^2.0.0",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^1.0.0",
"css-loader": "^1.0.1",
"eslint": "^5.9.0",
"eslint-config-standard": "^12.0.0",
"eslint-loader": "^2.1.1",
"eslint-plugin-node": "^8.0.0",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"file-loader": "^2.0.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.4",
"mockjs": "^1.0.1-beta3",
"node-sass": "^4.10.0",
"open-browser-webpack-plugin": "^0.0.5",
"raw-loader": "^0.5.1",
"redux-logger": "^3.0.6",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "4.19.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "3.1.9",
"webpack-merge": "^4.1.4"
}
}
注意：
babel 7.x的版本舍弃了以前的 babel-- 的命名方式，改成了@babel/-
修改依赖和.babelrc文件后就能正常启动项目了。
配置.babelrc:
{
"presets": ["@babel/preset-env", "@babel/preset-react", "mobx"],
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-runtime"
]
}
另外：本菜鸟早打包时还遇到一个比较坑的问题，一开始是我们打包后所有的svg图片都无法加载出来，我找了很久一位是我的配置出现问题，后来找到资料，是后端在进行nginx配置的时候没有引入mime.type的表单，导致后端本身不支持svg图片类型。后端修改配置后，页面即可正常加载。
小伙伴们可能注意到了这里除了引入Redux还引入了react-redux，因为他内部对 connect等函数进行了很好的封装。
安装方法如下
cnpm install --save redux
cnpm install --save react-redux
