webpack4 with Babel, React, CSS Module
- 這節主要講下babel, react, css module的簡單引入，后續會根據需要再來修改，我們先做一個版本
首先，看下需要裝哪些包，都是干什么的
"dependencies": {
"react": "^16.8.1", //react package
"react-dom": "^16.8.1",//the entry point to the DOM and server renderers for React
"webpack": "^4.29.0",
// polyfill: you can use Promise, WeakMap,Array.from,Object.assign,Array.includes..
// this is a polyfill, we need it to be a dependency
"@babel/polyfill": "^7.2.5"
},
"devDependencies": {
//Compile object rest and spread to ES5
"@babel/plugin-proposal-object-rest-spread": "^7.3.2",
// re-use of Babel's injected helper code to save on codesize.
"@babel/plugin-transform-runtime": "^7.2.0",
//a library that contain's Babel modular runtime
//helpers and a version of regenerator-runtime.
"@babel/runtime": "^7.0.0-beta.55",
//babel comman line tool.
"@babel/cli": "^7.2.3",
"@babel/core": "^7.2.2",
//a smart preset that allows you to use the latest JavaScript without needing to //micromanage which syntax transforms
"@babel/preset-env": "^7.3.1",
//@babel/plugin-syntax-jsx
//@babel/plugin-transform-react-jsx
//@babel/plugin-transform-react-display-name
//@babel/plugin-transform-react-jsx-self
//@babel/plugin-transform-react-jsx-source
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"css-loader": "^2.1.0",
"html-loader": "^0.5.5",
"style-loader": "^0.23.1",
"html-webpack-plugin": "^4.0.0-beta.5",
"clean-webpack-plugin": "^1.0.1",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
}
- 這里要注意的是@babel/polyfill，這個要放在dependencies里邊，因為是polyfill,代碼最后也是要在里邊的，所以不能放在devDependencies里。接著看babel的配置文件。.babelrc
{
"presets": [
["@babel/preset-env", {
"targets": {
"node": "current"
}
}],
["@babel/preset-react"]
],
"plugins": [
["@babel/plugin-transform-runtime"],
["@babel/plugin-proposal-object-rest-spread",{ "useBuiltIns": true }]
]
}
- webpack.config.js
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const baseConfig = {
entry: [
"@babel/polyfill", //這里要寫，配置polyfill,也可以寫在源碼里
"./src/index.js"
],
devtool: 'cheap-module-source-map',//production的source map
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader:'style-loader'
},
{
//這里注意，要使用css module以及css module的格式
loader:'css-loader?modules&localIdentName=[name]_[hash:base64:5]',
}
],
exclude: /node_modules/,
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
//js/jsx使用babel-loader來處理
loader: 'babel-loader'
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src', 'index.html'),//模板
filename: 'index.html',
hash: true,//防止緩存
}),
new webpack.HotModuleReplacementPlugin()
],
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
publicPath: "",
path: path.resolve(__dirname, "dist"),
filename: "[name]-bundle.js"
},
};
//增加這部分，當是開發環境的時候，再使用hmr和inline-source-map.
if (process.env.NODE_ENV === 'development') {
baseConfig.devtool = 'inline-source-map';
baseConfig.devServer = {
contentBase: './dist',
hot: true,
open: true,
};
}
module.exports = baseConfig;
- 然后寫個簡單的jsx
import React from 'react';
import * as style from '../css/main.css';
const HomeComponent = () => {
//測試對象展開
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }
//測試array.from
const arr = Array.from(new Set([1, 2, 3, 2, 1]));
const arr2 = [1, [2, 3], [4, [5]]].flat(2);
console.log(arr2);
//測試下promise
const promise = new Promise((resolve,reject)=>{
console.log("promise");
resolve(1);
});
//測試下symbol
const sym = Symbol();
console.log("symbol:"+sym.toString());
return <div>
<h2>Hello React16.7.0!</h2>
<div className={style.hello}>Hello CSS Module!</div>
</div>
};
export default HomeComponent;
到這里就能讓react的一個最簡單的例子跑起來了,看下index.js
import React from 'react';
import ReactDOM from 'react-dom';
import HomeComponent from './components/home'
ReactDOM.render(<HomeComponent />, document.getElementById('app'));
package.json里的scripts這樣寫
"scripts": {
"prod": "webpack --mode production",
"dev": "NODE_ENV=development webpack-dev-server --mode development --open"
},
