webpack 和 babel

1.webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
const htmlPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, './src/index.html'),  // origin file
    filename: 'index.html'
})
module.exports = {
    mode: 'development', // production development
    plugins: [htmlPlugin],
    module: {  // 所有第三方模块的配置规则，loader配置
        rules: [
            { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ },
            // 调用顺序从后面 css-loader 开始，再到 style-loader， ?modules 启用 css 模块化，只针对类名和id选择器
            // localIdentName 自定义生成类名格式
            // 取消模块化:global([.类名 | #id]) e.g.  :global(.content)
            // 文件模块化后:local([.类名]) 是默认的
            // 省略 node_modules 直接 import bootcss from 'bootstrap/dist/css/bootstrap.css'
            { test: /\.css$/, use: ['style-loader', 'css-loader'], exclude: /node_modules/ },
            { test: /\.scss$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]', 'sass-loader'], exclude: /node_modules/ },
            { test: /\.ttf|woff|woff2|eot|svg$/, use: 'url-loader'}, // 处理字体
        ]
    },
    resolve: {
        extentions: ['.js', '.jsx', '.json'], // 扩展后缀名
        alias: { //配置项目根目录
            '@': path.join(__dirname, './src')
        }
    }
}

2.package.join （创建 npm init -y）

{
  "name": "react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^3.4.2",
    "file-loader": "^5.1.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^1.1.3",
    "url-loader": "^3.0.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

3..babelrc

{
    "presets": ["env", "stage-0", "react"],
    "plugins": ["transform-runtime"]
}