手把手教你用webpack3搭建react项目(开发环境和生产环境)(二)

开发环境和生产环境整个配置源码在github上，源码地址：github-webpack-react 如果觉得有帮助，点个Star谢谢！！

开发环境肯定不能把css，js，字体图标之类的打包在一起，肯定要分开打包，还有就用js的类库和自己单独写的js也要单独打包，这样可以防止js文件特别大，接下来配置生产环境

我的项目目录和打包后的目录如下

一、对js单独打包处理

所有依赖的类库都在package.json文件里

//都在这个属性里
"dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  }

需要用到webpack的插件CommonsChunkPlugin 提取第三方公共库配置如下

var pkg = require('./package.json')；//首先引入package.json 通过pkg.dependencies来获取第三方公共库
主要修改两个地方

entry: {
　　　　index:path.resolve(__dirname, 'src/index.jsx'),
　　　　// 将 第三方依赖（node_modules中的） 单独打包 pkg或获取到package.json文件中的第三方依赖库Object.keys()
　　　　//Object.keys 返回一个所有元素为字符串的数组，其元素来自于从给定的对象上面可直接枚举的属性。这些属性的顺序与手动遍历该对象属性时的一致。
　　　　vendor: Object.keys(pkg.dependencies) ////插件中name,filename必须以这个key为值 这个字段和CommonsChunkPlugin这个插件是关联的
},
output: {
　　　　path: path.resolve(__dirname, 'dist'), //打包后文件的输出路径
　　　　filename: "js/[name].[chunkhash:8].js" //[chunkhash:8]这个是为了添加时间戳 //这里会输出两个js文件一个是自己写的js一个文件是第三方公共库的
},

plugins:[

// 提供第三方依赖的代码
new webpack.optimize.CommonsChunkPlugin({
　　　　name: 'vendor',
//    filename:"vendor.js"//忽略则以name为输出文件的名字，否则以此为输出文件名字
　})

]

 这里用到给文件添加时间戳，这里需要注意的是对js添加时间戳最好使用chunkhash，使用 hash 对js和css进行签名时，每一次hash值都不一样，导致无法利用缓存，

有必要了解一下hash，chunkhash和contenthash的区别，可以参考我写的文章：hash与chunkhash区别和需要注意的问题

二、对css单独打包

//需要安装这个插件
npm install --save-dev extract-text-webpack-plugin

 webpack配置如下//配置css{

   test: /.css$/,
   use: ExtractTextPlugin.extract({  //将css分离
   fallback: "style-loader",
   publicPath:'../',                 //解决打包图片或者字体图标出现路径的问题
   use: [
         {loader: 'css-loader',options: {importLoaders: 1,minimize:true}}, //添加true是为了压缩css
          {loader: 'postcss-loader',options:{ident:"postcss",plugins:[require("autoprefixer")("last 100 versions")]}}
            ]
      })
},
                //配置scss  执行顺序是从右往走的这个顺序是不能改变的
 {
     test: /.scss$/,                    
     use: ExtractTextPlugin.extract({    //将css分离
             fallback: "style-loader",
             publicPath:'../',         //解决打包图片和字体图标出现路径的问题
             use: [
                     {loader: 'css-loader',options: {importLoaders: 2,minimize:true}},//添加tue是为了压缩css的
                     {loader: 'postcss-loader',options:{ident:"postcss",plugins:[require("autoprefixer")("last 100 versions")]}},
                     'sass-loader'
                   ]
      })
 },

plugins:[

　　　　//提取css文件
　　　　new ExtractTextPlugin({
　　　　　　filename:'css/[name].[contenthash:8].css',  //这里使用的contenthash，这样修改css只有css的文件变化
　　　　})

]

 大家可以看一下我的另外一篇博客介绍几个hash直接的关系：点击查看

 三、对图片和字体图标单独打包

//对字体打包直接用file-loader不要使用url-loader，file-loader直接把文件移动到dist下不需要做任何处理
npm install --save-dev file-loader

想了解具体的请看另外一篇博客： webpack3配置字体图标和打包相关问题

具体配置如下

//配置图片必须使用hash
{
   test:/.(jpg|png|gif|jpeg)$/,
    use:[
           {loader:'url-loader',options: {limit: 8192,name:'img/[name].[hash:8].[ext]'}}//必须使用hash
         ]
},
//配置字体图标  这里最好使用file-loader
 {
    test: /.(woff|woff2|svg|ttf|eot)$/,
    use:[
         {loader:'file-loader',options:{name:'fonts/[name].[hash:8].[ext]'}}//会打包到dist下的fonts文件夹下，必须使用hash
      ]
 }

 四、需要使用插件html-webpack-plugin(生成html上篇已经讲过)和UglifyJsPlugin(压缩js代码不用任何配置直接使用)

new HtmlWebpackPlugin({
    template: __dirname + '/src/index.template.html'  //默认会在dist路径下生成index.html并引用所有的静态资源
}),
new webpack.optimize.UglifyJsPlugin({
     //输出不显示警告
    compress:{
        warnings:false //默认值
    },
   //输出去掉注释
    output:{
       comments:false  //默认值
    }
})

五、需要下载删除文件夹插件

npm install --save-dev rimraf

然后在package.json中配置

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack-dev-server --hot --colors --inline --open",
    "build": "rimraf dist && webpack --config webpack.dev.js"     //打包前需要先删除dist文件夹
 }

 到这一步开发环境的配置也完成

开发环境和生产环境整个配置源码在github上，源码地址：github-webpack-react 如果觉得有帮助，点个Star谢谢！！

相关文章：

手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)

webpack3中使用postcss-loader和autoprefixer给css3样式添加浏览器兼容

webpack3配置字体图标和打包相关问题

webpack中hash与chunkhash区别和需要注意的问题