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

Posted 2020-10-27 IT-Dashen

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

(一)是开发环境，(二)是生产环境。

一、首先创建package.json并且安装webpack和webpack-dev-server

//不用你书写任何，直接帮你创建一个最简单的package.json文件
npm init -y
//webpack必须，webpack-dev-server开启服务热加载做代理
npm install --save-dev webpack webpack-dev-server

只要下载的是工具类的，需要--save-dev，项目依赖的例如：react这些不需要写--save-dev

接下来开始配置一个完整项目需要配置的各项。先贴出我的项目目录

二、webpack的入口，出口和devserver的配置

var path = require(\'path\');//node提供的一块方法
var webpack = require(\'webpack\');
var htmlWebpackPlugin = require(\'html-webpack-plugin\');

module.exports = {

entry:\'./src/index.jsx\',                      //这是入口文件
output: {
     path: path.resolve(__dirname, \'dist\'),   //打包后文件的输出路径
     filename: \'bundle.js\',                   //输出文件名字，开发环境直接把输出名字固定
}，

　　devServer:{
　　　　contentBase:\'./dist\',   　　//指定服务开启的位置，在dist文件夹中
　　　　historyApiFallback: true,  //不跳转，在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，任意的 404 响应都可能需要被替代为 index.html
　　　　inline: true,              //实时刷新
　　　　port:8000,                 //默认8080
　　　　proxy:{                    //代理属性
　　　　　　"/api":{
　　　　　　target:\'http://localhost:9000/\',
　　　　　　pathRewrite: {"^/api":""}
　　　　　　/* 因为在 ajax 的 url 中加了前缀 \'/api\'，而原本的接口是没有这个前缀的
　　　　　　所以需要通过 pathRewrite 来重写地址，将前缀 \'/api\' 转为 \'\' */
　　　　　　}
　　　　}
　　}

}

三、配置js，es6和jsx的编译

//js的loader加载器还有es6转es5，如果react开发需要下载 babel-preset-react
npm install babel-core babel-loader babel-preset-env babel-preset-react --save-dev
//babel相关插件配置
npm install --save-dev babel-plugin-transform-runtime babel-preset-stage-0

配置如下:

 {
     test: /\\.(js|jsx)$/,           //匹配所有的js和jsx
      exclude:/node_modules/,       //除了这个文件夹外
      use: {
          loader: "babel-loader"    //babel的相关配置在.babelrc文件里
       }
  }

.babelrc文件的配置如下

{
  "presets": [
    "env",
    "react",
    "stage-0"
  ],
  "plugins": ["transform-runtime"]
}

想要跟深入了解babel的配置的可以查看此文章对英文版的翻译连接地址：https://excaliburhan.com/post/babel-preset-and-plugins.html

四、配置css，sass，postcss和autoprefixer

//css的loader转换器和style的loader转换器
npm install --save-dev css-loader style-loader
//因为sass-loader依赖于node-sass，所以还要安装node-sass,postcss-loader autoprefixer postcss 添加浏览器兼容
npm install --save-dev sass-loader node-sass postcss-loader autoprefixer postcss

配置如下所示

//配置css
 {
    test: /\\.css$/,
    use: [ 
        \'style-loader\',
        {loader: \'css-loader\'，,options: {importLoaders: 1}},
        {loader: \'postcss-loader\',options:{ident:"postcss",plugins:[require("autoprefixer")("last 100 versions")]}}
       ]
 },
 //配置scss  执行顺序是从右往走的这个顺序是不能改变的
  {
     test: /\\.scss$/,
     use: [ 
             \'style-loader\',
              {loader: \'css-loader\',options: {importLoaders: 2}}, //css-loader后还需要2个loader
              {loader: \'postcss-loader\',options:{ident:"postcss",plugins:[require("autoprefixer")("last 100 versions")]}},
              \'sass-loader\'
             ]
   }

关于postcss的配置详情可以查看我的另一篇博客：webpack3中使用postcss-loader和autoprefixer给css3样式添加浏览器兼容

五、配置图片和字体图标

npm install --save-dev url-loader

url-loader主要为了解决图片过多，http请求增加导致性能降低，他主要的原理是将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了，官网描述url-loader封装了file-loader（这个loader主要用户把一个文件不任何处理知识转移位置用），这就体现了url-loader的limit的参数的作用，具体工作步骤是1.文件大小小于limit参数，url-loader将会把文件转为DataURL；2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。因此我们只需要安装url-loader即可。

 配置如下

 //配置图片
 {
     test:/\\.(jpg|png|gif|jpeg|bmp)$/,
     use:{
           loader:\'url-loader\',
           options: {
                       limit: 8192    //限制图片的大小
                    }
          }
  },
   //配置字体图标
   {
      test:/\\.(woff|woff2|svg|ttf|eot)$/,
      use:{
              loader:\'url-loader\',
              options: {
                        limit: 10000,  //开发环境下这里足够大就可以，直接把字体图标打包到文件里，开发环境就需要单独打包了下一节会讲
                 }
           }
   },

 想了解具体的可以看我写的另一篇文章：webpack3配置字体图标和打包相关问题

六、最后一步使用插件html-webpack-plugin

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

 这个插件的作用就是用来生成html的，并且会自动帮你把打包后的静态文件引入的html中。

配置如下

//会以我项目里里的inde.template.html为模板，会在dist路径下生成index.html并引用所有的静态资源。项目输出路径为dist。
new HtmlWebpackPlugin({
     template: __dirname + \'/src/index.template.html\' 

})　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

 通过上边的步骤开发环境下的配置已经配置好了我在package.json文件中添加了如下：

"scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1",
    "start": "webpack-dev-server --hot --colors --inline --open",  //直接执行npm start 项目就开启了，默认打开的是webpack.config.js
    "build": "rimraf dist && webpack --config webpack.dev.js"      //npm run build 打包项目先删除dist文件夹，然后在运行webpack.dev.js
  }

 现在直接npm start 项目就开启了

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

相关文章：

 

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

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

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

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