小白搭建之部分填坑

代码仓库地址：webpack+react+redux+es6

最开始拿已经写好的配置来给大家讲解，部分代码，没做解释，在后期的尝试中有些朋友会遇见坑，先给大家讲两个坑吧，如有其他的，欢迎交流探讨

坑一 ：

• 描述： 当开发模式换为production 时,即下方命令时，控制台输入npm start 会在浏览器上显示报错信息

//package.json 更改了dev的--mode development为 --mode production
"scripts": {
  "start": "npm run dev",
  "dev": "webpack-dev-server --mode production --config webpack.dev.config.js --open ", 
   //...
}

报错为

Failed to compile.
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  bundle.js (963 KiB)

• 解决办法：在配置文件webpack.dev.config.js中加入如下配置：

performance: {
        hints:false        
 }

坑二：

• 描述：配置好了如下图片的loader但是不能在浏览器上正确显示，除非使用require（'路径'）的格式讲图片加载获取到

// webpack.dev.config.js
 {
                test: /\.(jpg|png|gif|svg)$/,
                use :{
                     loader: "url-loader",
                     options: {
                        limit: 8192,
                        name: "[name].[ext]"
                    }
                }
}

• 解决办法：打开浏览器控制台可以发现，原来资源文件并没有被打包到项目的构建目录中，因此使用插件copy-webpack-plugin，将本地资源文件copy到构建目录中去

• 安装依赖

    npm i -D copy-webpack-plugin

• 配置webpack.dev.config.js

// webpack.dev.config.js
const CopyWebpackPlugin = require("copy-webpack-plugin");  //请求依赖
//省略其他配置
//...
 plugins:[
        //...
        new CopyWebpackPlugin([
            {
                from:__dirname+"/images",   //定义要拷贝的源目录  
                to:__dirname+"/static/images",  //定义要拷贝到的目标目录
                force: true   //强制覆盖先前的插件
            }
        ]),
        
    ],