1、拆分配置和merge
    webpack.common.js
    webpack.dev.js 引入common
    webpack.prod.js 引入common
    使用webpack-merge 引入{smart}引入common

    2、启动本地服务 dev环境下 安装webpack-dev-server
    可以监听文件变化，解决开发阶段跨域问题
    devServer:{
    contentBase:’./bundle’ 打包后目录
    open:true //是否自动在浏览器打开
    port:9090 //服务器端口号
    }
    package.json启动方式：npx webpack-dev-server —config webpack.xxx.js
    解决跨域：

    1. devServer: {
    2.         contentBase: "./dist",
    3.         open: true,
    4.         port: 9090,
    5.         proxy: {
    6.             // 所有API开头的请求都会被代理到target
    7.             // 例如: 我们发送请求地址: http://127.0.0.1:9090/api
    8.             //       实际发送请求地址: http://127.0.0.1:3000/api
    9.             "/api": {
    10.                 target: "http://127.0.0.1:3000", // 代理地址
    11.                 changeOrigin: true,     // 域名跨域
    12.                 secure: false,          // https跨域
    13.             }
    14.         }
    15.     }

    3、es6转化 babel-loader
    在企业开发中为了兼容一些低级版本的浏览器, 我们需要将ES678高级语法转换为ES5低级语法
    npm install —save-dev babel-loader @babel/core @babel/preset-env

    {
    test: /\.js$/,
    exclude: /node_modules/,  // 不做处理的目录
    loader: "babel-loader",
    options: {
        presets: ["@babel/preset-env"],
    },
}

    我们通过配置presets的方式来告诉webpack我们需要兼容哪些浏览器

    presets: [["@babel/preset-env",{
            targets: {
                "chrome": "58",
                "ie": "10"
            },
        }]],

    4、处理样式 css-loader style-loader
    2.1安装cssloader
    npm install —save-dev css-loader
    2.2安装styleloader
    npm install style-loader —save-dev

                {
                test: /\.css$/,
                /*
                css-loader:   解析css文件中的@import依赖关系
                style-loader: 将webpack处理之后的内容插入到HTML的HEAD代码中
                * */
                use: [ 'style-loader', 'css-loader' ]
            }

    4.1单一原则, 一个loader只做一件事情
    4.2多个loader会按照从右至左, 从下至上的顺序执行
    POSTCSS-LOADER适配浏览器兼容css
    使用：需要配置postcss.config.js，安装autoprefixer 添加前缀 比如transform

    module.exports = {
    plugins: {
        "autoprefixer": {
            "overrideBrowserslist": [
                // "ie >= 8", // 兼容IE7以上浏览器
                // "Firefox >= 3.5", // 兼容火狐版本号大于3.5浏览器
                // "chrome  >= 35", // 兼容谷歌版本号大于35浏览器,
                // "opera >= 11.5" // 兼容欧朋版本号大于11.5浏览器,
                "chrome  >= 36", // 如果需要适配的浏览器完全兼容则不会添加前缀
            ]
        }
    }
};

    5、处理图片：
    dev中可以使用file-loader
    prod中可以使用url-loader:可做配置限制大小 使用base64，输出到img目录下，可以减少http请求

    use:{
loader:'url-loader',
options:{
    limit:5*1024,
  outputPath:'/img'
}
}

    6、输出的js文件，可命名为bundle.[contentHash:8].js，内容改变 hash会改变，浏览器刷新时会命中缓存
    7、模块化