webpack 配置 react-pro

1、首先执行 npm init ，生成package.json文件，

　　package.json文件中包含项目名称，描述，作者等等信息；

　　在package.json中配置信息，除了这些之外，还要配置我们的运行的命令，比如npm run dev以及npm run build命令；（详情请看第五条）

　2、安装 webpack webpack-dev-serve模块

　　在安装这两个依赖模块的时候，需要注意一下版本问题，webpack-dev-serve@3.1.4 和webpack的兼容性很差，基本和webpack@4.16.0以及@3.8.0和@3.6.0的版本都不兼容，因此建议使用webpack@3.8.0 && webpack-dev-server@2.9.7， 之所以使用webpack@3.8.0的版本是因为兼容 bable 的版本；

　　如果出现webpack与webpack-dev-serve版本的兼容问题，那么在运行 npm run dev的时候，就会报错： Cannot find module 'webpack-cli/bin/config-yargs'

　　安装完这两个模块之后，会多一个 node-modules文件夹以及package-lock.json文件；有时候编辑器里可能不会显示node-modules文件夹

　3、构建项目的基本模块

　　例如： 创建webpack.config.js 文件，进行配置，并创建 index.html src/main.js 文件

　4、构建 index.html 文件

　　我们只需要注意在 body 加入 组件要插入的标签即 <div ></div>,

　　以及引入入口文件，但是这里的 src=‘ ’，通常是只要我们output 中的filename；

　5、构建webpack.config.js文件

　　这里我们要进行开发环境以及生产环境的一些配置，顾名思义开发环境 development 就是我们开发者在本地开发的环境，生产环境就是我们打包，投入到线上的一个环境；

　　通常我们要获取 process.env.NODE_ENV 来进行判断是在生产环境还是开发环境，但是这个变量的获取需要我们要先进行设置的，如果不进行设置的话，process.env 返回的值会是一个空的对象，因此为了开发的方便我们通常会建立一个生产环境的配置文件，一个生产环境的配置文件，一般情况下，我们在 package.josn 中，通过 dev: webapck-dev-server 来开启我们的本地的开发环境，通过 build: node build.js 来开启我们的生产环境；按照 vue-cli 我们这样的操作是没有错误的，但是我们自己安装依赖文件的时候，在执行 node build.js 的时候，命令行没有报错，也没有任何的效果，因为执行了这个文件，但是并没有去执行webpack环境的命令；其实不管是用 node build.js 命令，还是用 webpack build.js 命令，我们最终要想实现通过 npm run dev 或者 npm run build 去执行两个不同的文件，我们最终都是要用 webpack 命令去打包和维护我们的项目代码的，因此，如要用 node 命令，那么我们就要在我们的 build.js 文件中去执行

　　　　webpack( product, ( err, state) => { }); product是我们的打包环境配置的文件；

　　但是用node 的话，虽然这里我们区分了是生产环境还是开发环境，但是对于多种条件下我们是没办法去传递参数然后来进行判断更多的条件的，因此在这里我还是觉得直接用 webpack 命令的比较好，用webpack 命令的话，就可以通过 -- 来传递一些参数，例如：我们在package.json中配置命令的时候，传递一个参数： --env=development ，然后在我们的webpack.config.js中通过

　　　　　　　　argv = require('minimist)(process.argv.slice(2)) 来获取我们配置的参数，再通过 argv.env 就能获取到我们要的参数；

　　拿到我们是在什么环境下了之后，我们可以就可以在 plugins 中通过webpack.DefindPlugin进行一些环境变量的配置；

　　例如： plugins: [

　　　　　　　　new webpack.DefinedPlugin({

　　　　　　　　　　'process.env' : {

　　　　　　　　　　　　NODE_ENV: ' " development" '

　　　　　　　　　　}

　　　　　　　　})

　　　　　　]

　　在我们用 build: ' webpack --config build.js ' 的时候，必须要注意的是，如果 webpack 后边有目标文件，那么必须在目标文件的前边加上 --config； 如果后边没有目标文件的话，只有一个 build: ' webpack '，那么默认执行的是 webpack.config.js 文件，这个时候我们就要 通过--env 等去设置一些参数，然后在webpack.cnfig.js 中再去确认我们究竟要去执行何种配置；

　　此外，如果我们是用的 webpack@4.1.2的版本，那么在配置 dev 以及 build 命令的时候，我们必须要加上 --mode=development 去区分是什么环境，要不然的话，命令行里边是会出警告的

　　　　（1）、配置入口文件 entry

　　　　　　入口文件一般包括单入口，多入口，单文件多入口即同一个文件夹下的多个文件；

　　　　　　单入口文件，一般情况： entry: " ./src/main.js " ;

　　　　　　多入口文件， 一般情况： entry: { a: ' ' , b: ' ' };

　　　　（2）、配置出口文件 output

　　　　　　同样的出口文件也包括，一个出口和多个出口的；

　　　　　　一般配置如： output: {

　　　　　　　　　　　　　　filename: ' bundle.js ' , //单入口时一般这样配置

　　　　　　　　　　　　//　 filename: ' [name].js ' , //多入口是一般这样，一个入口一个js文件

　　　　　　　　　　　　　　path: __dirname + ' ./dist ') ,

　　　　　　　　　　　　　　publicPath: ' https://www.mixiaoqi.top/comment' , //打包之后文件夹放存放的地方

　　　　　　　　　　　　}

　　　　　　output的配置属性还有很多，但是常用到的就这些属性；

　　　　 （3）、配置 loader

　　　　　　1) babel-loader 是用来解析 es6 代码的，将其解析成 es5 然后浏览器就可以识别到了

　　　　　　　　需要安装的依赖包括 babel-core、babel-loader、 babel-preset-es2015；根据需要一般还需要安装 babel 以及 babel-preset-react；

　　　　　　　　配置： {

　　　　　　　　　　　　　　test: /\.js|.jsx$/ ,

　　　　　　　　　　　　　　loader: ' babel-loader ',

　　　　　　　　　　　　　　query: {

　　　　　　　　　　　　　　　　presets: [ ' es2015' , ' react ' ]

　　　　　　　　　　　　　　}

　　　　　　　　　　　　}

　　　　　　 2) css-loader是用来解析css的

　　　　　　　　需要安装 style-loader 、css-loader

　　　　　　　　配置： {

　　　　　　　　　　　　　　test: /\.css$/ ,

　　　　　　　　　　　　　　loader: ' style-loader!css-loader '

　　　　　　　　　　　　}

　　　　　　　　在安装css-loader的时候需要注意一下，css-loader 的版本，最新版本@2.1.0，并不能很好的去配合babel进行css或者 scss 的解析，所以用 css-loader@0.28.7 的兼容性还是很不错的

　　　　　　 3) sass-loader使用来解析scss 和 sass 文件的

　　　　　　　　需要的依赖 style-loader、css-loader、sass-loader、node-sass

　　　　　　　　配置： {

　　　　　　　　　　　　　　test: /\.scss$/ ,

　　　　　　　　　　　　　　loader: ' style-loader!css-loader!sass-loader '

　　　　　　　　　　　　}

　　　　　　4） url-loader 用来处理 图片的地址

　　　　　　　　需要的依赖 url-loader

　　　　　　　　配置： {

　　　　　　　　　　　　　　test: /\.(jpg|png|gif|bmp|jpeg)$/ ,

　　　　　　　　　　　　　　loader: ' url-loader ',

　　　　　　　　　　　　　　options: {

　　　　　　　　　　　　　　　　limit: 10000

　　　　　　　　　　　　　　}

　　　　　　　　　　　　}

　　　　　　 5）plugin 常用插件的配置，除了要进行环境的设置之外，webpack还提供了大量的其他插件，例如： html-webpack-plugin、extract-text-webpack-plugin、clean-webpack-plugin,其中

　　　　　　　　　heml-webpack-plugin: 该插件主要是用来在向生产环境打包文件的额时候，产生一个html文件，并与我们代码中产生的文件进行相关联；这个插件可以设置很多的属性，比如：

　　　　　　　　　　　　title: 设置打包之后的html的文件名字即 title 的名字 ；

　　　　　　　　　　　 filename: 生成的html文件的文件名称 ；

　　　　　　　　　　　　template: 指定html模板的地址 ；

　　　　　　　　　　　　inject: 用来指定生成的js 文件插入到html文件的什么位置，值包括 true、body、html、false；true等效于body，若为false的话，则只是单纯的生成一个html文件，不插入js；

　　　　　　　　　　　　minify: 对html文件进行压缩 ；

　　　　　　　　　　　　hash: 为true时给生成的 js 文件生成一个 独特的hash值，这个可以避免线上的缓存问题，默认值为false ；

　　　　　　　　　　　　cache： 默认值为true, 表示只有修改时才生成一个新的js文件 ;

　　　　　　　　　extract-text-webpack-plugin: 该插件主要是用来对css 文件进行抽离的，所以一般在打包的时候使用，基本的使用方法是：

　　　　　　　　　　　　new ExtractTextPlugin({

　　　　　　　　　　　　　　filename: ' styleCss/[name]_[contenthash].css '

　　　　　　　　　　　　})

　　　　　　　　　　　　需要注意的是，使用该插件的时候，不仅要对 plugins 进行配置，而且还要再 loader 中进行配置，但是在 webpack@3.0的版本的配置方法和@4.0版本的配置方法是不一样的，因为两个版本中的插件的方法不一样，在@4.0版本使用的是 mini-css-extract-plugin 这个插件，

　　　　　　　　　　　　在@3.0版本中的配置是：

　　　　　　　　　　　　　　{ test: /\.css$/ , loader: ExtractTextPlugin.extract( { fallback: ' style-loader ' , use: ' css-loader ' })},

　　　　　　　　　　　　　　{ test: /\.css$/ , loader: ExtractTextPlugin.extract( { fallback: ' style-loader ' , use: [' css-loader ' , ' sass-loader ' ] })}

　　　　　　　　　　　　在@4.0的版本中的配置是：

　　　　　　　　　　　　　　{ test: /\.css$/ , use: [ MiniCssExtractPlugin.loader , { loader: ' css-loader ' } , { loader: ' postcss-loader ' } ] },

　　　　　　　　　　　　　　{ test: /\.css$/ , use: [ MiniCssExtractPlugin.loader , { loader: ' css-loader ' } , { loader: ' postcss-loader ' } , { loader: ' sass-loader'} ] },

　　　　　　　　　　　　虽然网上有指出用 extract-text-webpack-plugin 的最新版本，但是并不好用，至少用 npm 安装的时候还是和webpack@4.0的版本不兼容；

　　　　　　　　除了这些插件还有用到 js 的压缩等，webpack@3.0是需要配置一下的，但是 webpack@4.0是不需要配置的，在用插件的时候，特别特别要注意的就是版本的兼容问题，很糟心也很难受！！！