Webpack4:完整的項目搭建

此項目屬於從零開始搭建React開發環境，主要知識點： eslint(代碼檢測)， 按需加載（bundle import）,react-router4.x,react-css-modules(css模塊化),postcss(css前綴自動添加)，px2rem(移動端適配)，webpack4.x，es6，less，antd-mobile。

啓動

* npm i 
* 開發環境 npm start
* 生產環境 npm run build
* 代碼檢測 nup run lint
複製代碼

開始webpack環境搭建

導入插件

const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CleanWebpackPlugin = require('clean-webpack-plugin');
    const miniCssExtractPlugin = require('mini-css-extract-plugin');
複製代碼

entry/output代碼

entry: {
    bundle: path.resolve(__dirname, './src/main.js'),
    //添加要打包在vendor裏面的庫
    vendors: ['react','react-dom','react-router'],
  },
  output: {
    path: path.resolve(__dirname, './build'),
    filename: '[name].[hash].js',
    chunkFilename: "[name].chunk.[hash:5].js"
  },
複製代碼

rules

rules: [
      {
        test: /\.js|jsx$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.(less|css)$/,
        include: path.resolve(__dirname, './src/components'),
        use: [
          miniCssExtractPlugin.loader,
          { loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              // namedExport: true, // this is invalid Options ,I find it
              camelCase: true,
              localIdentName: '[path][name]__[local]--[hash:base64:5]',
            },
          }, // react css module
          'resolve-url-loader',  // may need this (https://www.npmjs.com/package/resolve-url-loader)
          'px2rem-loader', 'postcss-loader', 'less-loader'
        ],
      },
      {
        test: /\.(less|css)$/,
        include: path.resolve(__dirname, './src/css'),
        use: [ miniCssExtractPlugin.loader, 'css-loader', 'px2rem-loader', 'postcss-loader', 'less-loader'],
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: 'images/[hash].[ext]',//全部圖片在一個目錄
            }
          }
        ]
      }
    ]
複製代碼

plugins

plugins: [
        new miniCssExtractPlugin({
          filename: 'style/app_[contenthash:5].css',
          chunkFilename: '[id].[hash].css',
        }),
        new webpack.DefinePlugin({//設置成production去除警告
          'process.env': {
            NODE_ENV: JSON.stringify("production")
          }
        }),
        new HtmlWebpackPlugin({
          filename: 'index.html',
          template: './index.html',
          inject: 'body'
        }),
        new CleanWebpackPlugin(['dist',
          'build'], {
            root: __dirname,
            verbose: true,
            dry: false,
            exclude: ['jslibs']
          })
      ]
複製代碼

dev 配置

const path = require('path');
    const webpackMerge = require('webpack-merge');
    const baseWebpackConfig = require('./webpack.base.config');
    
    
    module.exports = function () {
      return new webpackMerge(baseWebpackConfig, {
        mode: 'development',
        devServer: {
          host: 'localhost',
          port: 3334,
          contentBase: path.resolve(__dirname, './build'),
          historyApiFallback:true,
          compress: true
        },
        devtool: 'source-map',
      })
    }


複製代碼

prod 配置

const webpackMerge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.config');


module.exports = function () {
  return new webpackMerge(baseWebpackConfig, {
    mode: 'production'
  })
}

複製代碼

至此 webpack環境搭建已經所有完成 具體能夠看完整代碼 github.com/long-joan/w…