全局安装webpack和webpack-cli

npm install webpack webpack-cli -g

初始化项目

npm init

局部安装webpack和webpack-cli

npm install webpack webpack-cli --save

配置webpack.config.js

一、配置打包入口、出口文件
二、下载各种loader模块，es6转化成es5加载器（babel-core核心、babel-loader、@babel/preset-env制定规则ES6789—>ES5、@babel/preset-react特别语法JSX），css加载器（style-loader、css-loader），背景图片加载器（url-loader），图片加载器（html-withimg-loader）
三、配置loader，打包样式和图片
四、配置本地服务、webpack-dev-server
五、配置各种插件

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry:"./src/index.js",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"bundle.js",
        publicPath: '/'
    },
    module:{
        rules:[
            {
                test:/\.(js|jsx)$/,
                exclude:/node_modules/,
                use:[{
                    loader:"babel-loader",
                    options:{
                        presets:["@babel/env","@babel/react"]  //babel-loader高版本对应新的预设 @babel/preset-env和@babel/preset-react
                    }
                }]
            },
            {
                test: /\.less$/,
                loader: ['style-loader', 'css-loader', 'less-loader']  // 增加 'less-loader' ，注意顺序
            },
            {
                test: /\.css$/,
                loader: ['style-loader', 'css-loader']  // 增加 'postcss-loader' , 单独抽离css ， 注意顺序
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg)/,
                use: {
                  loader: 'url-loader',
                  options: {
                    outputPath: 'images/', // 图片输出的路径
                    limit: 10 * 1024
                  }
                }
            },
            //处理 html 代码中 <img src="..."/> 的形式
            {
                test: /\.html$/,
                use: 'html-withimg-loader'
            }
        ]
    },
    //webpack-dev-server配置本地服务器，并配置跨域
    devServer:{
        contentBase: path.join(__dirname, "dist"),
        port: 8000, // 本地服务器端口号
        hot: true, // 热重载
        inline:true
    },
    plugins:[
        //创建入口文件html
        new HtmlWebpackPlugin({
            filename:"index.html",
            template:"./index.html"
        })
    ]
}

配置package.js启动项

"scripts": {
    "dev": "webpack-dev-server --mode development --open --inline",
    "build": "webpack --mode production"
  }

配置入口文件

import React from 'react';
import ReactDom from 'react-dom';
class App extends React.Component {
    render(){
        return <div>aaaaa</div>
    }
}
ReactDom.render(<App />,document.getElementById('app'));

分区打包(创建复用的webpack.comon.js)

1、package.json配置

    "start": "webpack-dev-server --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"

2、创建webpack.common.js文件

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry:"./src/index.js",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"bundle.js",
        publicPath: '/'
    },
    module:{
        rules:[
            {
                test:/\.(js|jsx)$/,
                exclude:/node_modules/,
                use:[{
                    loader:"babel-loader",
                    options:{
                        presets:["@babel/env","@babel/react"]  //babel-loader高版本对应新的预设 @babel/preset-env和@babel/preset-react
                    }
                }]
            },
            {
                test: /\.less$/,
                loader: ['style-loader', 'css-loader', 'less-loader']  // 增加 'less-loader' ，注意顺序
            },
            {
                test: /\.css$/,
                loader: ['style-loader', 'css-loader']  // 增加 'postcss-loader' , 单独抽离css ， 注意顺序
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg)/,
                use: {
                  loader: 'url-loader',
                  options: {
                    outputPath: 'images/', // 图片输出的路径
                    limit: 10 * 1024
                  }
                }
            },
            //处理 html 代码中 <img src="..."/> 的形式
            {
                test: /\.html$/,
                use: 'html-withimg-loader'
            }
        ]
    },
    plugins:[
        //创建入口文件html
        new HtmlWebpackPlugin({
            filename:"index.html",
            template:"./index.html"
        })
    ]
}

3、创建webpack.dev.js文件

const path = require("path");
const merge = require("webpack-merge");
const commonConfig = require("./webpack.common.js");
const devConfig = {
    mode:'development',
    devtool:'cheap-module-eval-source-map',
    //webpack-dev-server配置本地服务器，并配置跨域
    devServer:{
        contentBase: path.join(__dirname, "dist"),
        port: 8000, // 本地服务器端口号
        hot: true, // 热重载
        inline:true,
        proxy: {
            '/api/*': {
              target: 'http://localhost:3333', // 目标服务器地址
              secure: false, // 目标服务器地址是否是安全协议
              changeOrigin: true, // 是否修改来源, 为true时会让目标服务器以为是webpack-dev-server发出的请求!
            }
        }
    },
    //tree-shaking标记无相关联的代码（开发环境）
    optimization:{
        usedExports:true
    }
}
module.exports = merge(commonConfig,devConfig);

4、创建webpack.prod.js文件

const merge = require("webpack-merge");
const commonConfig = require("./webpack.common.js");
const prodConfig = {
    mode:'production',
    //打包新增map文件，development（cheap-module-eval-source-map）production(cheap-module-source-map)
    devtool:'cheap-module-source-map'
}
module.exports = merge(commonConfig,prodConfig);

项目案例