一、entry

单页应用程序的入口配置一般如下所示：

entry: __dirname + "/src/category/demo1/demo1.js"

这个配置就是指定 webpack从 /src/category/demo1/demo1.js这个文件开始进入，进行一系列的打包编译过程。
多入口文件的entry配置是对象的形式

entry: {
        demo1:__dirname + "/src/category/demo1/demo1.js",
        demo2:__dirname + "/src/category/demo2/demo2.js"
    }

二、output

output: {
        libraryTarget: 'umd',
        path:__dirname +'/dist/',//打包后的文件存放的地方
        filename: "[name].js"//打包后输出文件的文件名
    }

三、使用webpack-dev-server构建本地服务器

效果：浏览器监听你的代码的变更，并自动刷新显示修改后的结果

npm install --save-dev webpack-dev-server

配置文件 webpack.config.js 配置如下

module.exports={
    devtool: 'eval-source-map',
    entry: __dirname + "/src/category/demo2/pdf.js",
    output: {
        libraryTarget: 'umd',
        path:__dirname +'/dist/',
        filename: "[name].js"
    },
    devServer: {
        contentBase: "./src",//本地服务器所加载的页面所在的目录
        port:"8080",//设置监听端口
        historyApiFallback: true,//不跳转
        inline: true//源文件变更时，实时刷新
    }
};

在package.json中的scripts对象中添加如下命令，用以开启本地服务器和webpack打包：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack", //打包命令
    "server": "webpack-dev-server --open" //开启本地服务
  }

四、Loaders

Loaders是webpack提供的最激动人心的功能之一了。通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件。

Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置

1、babel解析
安装依赖

"devDependencies": {
    "@babel/core": "^7.3.4", //核心功能模块
    "@babel/plugin-transform-runtime": "^7.3.4",
    "@babel/preset-env": "^7.3.4", //解析Es6
    "@babel/preset-react": "^7.0.0", //解析JSX
    "babel-loader": "^8.0.5"
  }

webpack.config.js中的配置如下：

module: {
        rules: [
            {
                test:/(\.jsx|\.js)$/,
                use:{loader:"babel-loader"},
                exclude:/node_modules/
            }
        ]
    }

Babel其实可以完全在 webpack.config.js 中进行配置，但是考虑到babel具有非常多的配置选项，在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂，因此一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中。
例如在.babelrc中做如下配置：

{
  "presets":["es2015","react","stage-1"],
  "plugins": [["import", {
      "libraryName": "cheui-react",
      "libraryDirectory": "lib/components",
      "camel2DashComponentName": true 
  }]]
}

2、css文件解析
webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options:{
                              modules:true, //指定启用css modules
                              localIdentName: '[name]__[local]--[hash:base64:5]'// 指定css的类名格式
                          }
                    }
                ]
            }
        ]
    }

Webpack对CSS模块化提供了非常好的支持，只需要在CSS loader中进行简单配置即可，然后就可以直接把CSS的类名传递到组件的代码中，这样做有效避免了全局污染

3、CSS预处理器
处理less需要依赖less-loader
处理scss需要依赖sass-loader，其中sass-loader依赖于node-sass
通过上述预处理器可以将less、scss这些特殊类型的语句转化为浏览器可识别的CSS语句

4、css文件单独打包
webpack版本 < 4 时 通过extract-text-webpack-plugin插件
webpack版本 = 4 时 通过mini-css-extract-plugin插件

注意extract-text-webpack-plugin next版本 也可以支持webpack4

npm install --save-dev extract-text-webpack-plugin@next

5、添加CSS3前缀

npm install autoprefixer postcss postcss-loader  postcss-sprites

webpack.config.js 解决上述3、4、5需求的配置如下：

module: {
        rules: [
            {
                test:/\.(le|c|sc)ss$/,
                use:[
                    { loader: MiniCssExtractPlugin.loader },
                    {loader: "css-loader"},
                    {
                        loader: "postcss-loader",
                        options: {
                            ident:'postcss',
                            plugins: [
                                require("autoprefixer")({
                                    browsers:'last 100 versions'
                                })
                            ]
                        }
                    },
                    {loader: "less-loader"},
                    {loader: "sass-loader"}
                ]
            }
        ]
    },
plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css'
        })
    ]

6、图片处理
前端项目中除了html、css、js，不可避免地要处理图片文件，webpack打包图片文件是通过file-loader、url-loader、img-loader、html-loader处理的。

file-loader :对文件进行处理 （如：打包图片文件等）
url-loader : url-loader中内置了 file-loader，url-loader可以将指定大小及以下的图片文件转成base64写入js，避免额外请求图片资源，如果超过指定大小再使用file-loader打包图片文件。
img-loader: 作用是对图片进行压缩

常用的三种加载图片的方式:

css中引入

.car1{
  background: url('./assets/img/gongchengc_icon@2x.png')
}
.car2{
  background: url('./assets/img/huochec_icon@2x.png')
}
.car3{
  background: url('./assets/img/kechec_icon@2x.png')
}

js引入

let imgSrc = require('./assets/img/huochec_icon@2x.png');
class Home extends Component{
    render() {
        return (
            <div onClick={()=>{console.log('1')}} className="root">
                测试内容xia
                <div className="test">
                    测试内容xia1
                </div>
                <img src={imgSrc} alt=""/>
                <Test/>
            </div>
        )}
}

这两种 使用 file-loader 或 url-loader可以解决

html中引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<img src="./category/demo2/assets/img/u175.png"/>
</body>
</html>

要处理html中的图片，需要使用其html-loader,具体配置如下：

module: {
        rules: [
            {
                test:/\.(png|jpg|gif|jpeg)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            name:'[name].[ext]',  //图片打包后文件名
                            outputPath:'images',  //图片打包后存放的目录
                            limit:1000,  //小于1000字节的图片自动转成base64格式，且不会存在实体图片
                            publicPath: current_env === "development" ? "" :"https://img.58cdn.con.cn/img/"
                        }
                    },
                   {
                        loader:'img-loader',
                        options:{
                            pngquant:{
                                quality:80
                            }
                        }
                   }
                ]
            },
            {
                test: /\.html$/,
                use: {
                    loader: 'html-loader'
                }
            }
        ]
    },

五、插件（Plugins）

插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，scss，less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。
Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。

要使用某个插件，我们需要通过npm安装它，然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例

1、给打包后代码 添加版权声明的插件

plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究')
         ]

2、html-webpack-plugin
这个插件的作用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）。

npm install --save-dev html-webpack-plugin

在src目录下，创建一个index.html文件模板，这个模板包含title等必须元素，在编译过程中，插件会依据此模板生成最终的html页面，会自动添加所依赖的 css, js，favicon等文件

更新webpack的配置文件

plugins: [
        new HtmlWebpackPlugin({
            template:__dirname + "/src/index.html"})
    ]