webpack4学习（React）--重点细节整理笔记（Webpack 4 教程：从零配置到生产发布--http://www.css88.com）
一、开始配置webpack4开发环境
- cmd打开操作界面
- mkdir 文件名 && cd 文件名 ------创建项目并进入项目目录
- npm init -y ------初始化创建package.json文件，-y的意思是初始化时全部选择yes，不需要每一步都确认
- 因为webpack的cli在webpack4版本之前是和webpack在一起的，而webpack4将其分开，为了更好的管理，所以必须同时引入webpack4与webpack-cli ，使用命令npm i webpack webpack-cli --save-dev（i是install的缩写，--save-dev表示非全局安装，仅在此项目下安装）
- 配置package.json文件添加“script”{“build”:"webpack"}
- 此时运行npm run build，会报错，在webpack4之前的版本，需要在webpack.config.js配置entry入口文件，而现在默认的入口文件是./src/index.js，只需在项目中创建src文件夹，并新建index.js文件，即可正常运行npm run build
- webpack的输出文件也不需要定义，默认的输出目录是./dist/main.js，运行后会默认将文件打包至dist目录中，此文件不需要自建
二、webpack4的两种开发环境development（开发）、production（生产）
- 在webpack4之前，开发环境和生产环境需要两个不同的文件来控制
- 在webpack4中只需要在package.json运行时设置相应的运行模式即可：设置“script”{“build”:“webpack --mode development”,“dev”:“webpack --mode production”}，此时如果运行npm run build 打包成的文件是经过压缩的，而npm run dev打包而成的文件是未压缩的
- 两种模式的效果：开发模式运行速度提升了，生产环境进行了压缩和作用域提升等
三、覆盖对应的入口文件及出口文件
- 只需在package.json中配置对应的文件位置
例：我的项目文件名字为testwebpack
“script”:{
"build":"webpack --mode production .testwebpack/src/index2.js --output .dist/main2.js "
"dev":"webpack --mode development .testwebpack/src/index2.js --output .dist/main2.js "
}
四、使用Babel将ES6转换为ES5
4.1 安装babel相关的加载项
命令：npm i babel-core babel-loader babel-preset-env --seve-dev
1、babel-core（babel编译器的核心，如果想使用babel-loader进行编译，必须安装babel-core，安装完不需要引用）
2、babel-loader（webpack中需要引用的loader）
3、babel-preset-env（用于将ES6代码编译为ES5代码，此方式推荐使用）
babel-preset-env的优势在于按需编译：例如使用babel-preset-es2015的时候会将大部分浏览器都支持的generator函数也编译，这是没有必要的，而babel-preset-env可以声明环境，只会编译环境中不支持的特性。
4、创建babel的配置文件.babelrc，
文件内容：
{
"presets":["env"]
}
4.2 babel-loader的两种使用方法
1、通过配置文件添加（webpack4零配置的口号当前仅限于①入口文件、②出口文件、③运行环境三者不需要配置，其他loader仍然需要配置，如果想改变入口文件和出口文件，才需要在配置文件中写entry属性与output属性），添加配置文件webpack.config.js，内容如下：
module.exports = {
module: {
rules: [ {
test: /\.js$/,//匹配的文件扩展名
exclude: /node_modules/, //排除不需要编译的文件，加快编译速度
use: {
loader: "babel-loader"
}
}]
}
};
2、不通过配置文件用babel-loader文件，在webpack.json中配置，
--module-bind参数在命令行指定加载器（不建议使用，最好不增加scripts的复杂性），如下：
"scripts": {
"dev": "webpack --mode development --module-bind js=babel-loader",
"build": "webpack --mode production --module-bind js=babel-loader"
}
五、在React中使用webpack4
1、安装React
npm i react react-dom --save-dev（react 是react的核心代码，react的核心是虚拟DOM，即使用js对象来表达一个DOM的包含；react-dom的核心功能就是将这些虚拟的DOM编译成为实际的DOM）
2、安装babel-preset-react
npm i babel-preset-react --save-dev（babel-preset-react: 转义react的jsx语法）
3、设置.babelrc
{"presets": ["env", "react"]}
4、配置webpack.config.js加载loader
module.exports = {
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
5、运用es6语法编写js文件或者jsx文件，接下来在
./src/index.js中 import(导入) 组件（import App from "./App";）
6、最后运行npm run build
7、此时看不到界面效果，我们需要引入其他组件来编译页面html-webpack-plugin 和 html-loader；安装html-webpack-plugin（打包时自动生成html文件，并包含css、js文件的引用）、html-loader（html-loader 将解析 URL，并请求图片和你所期望的一切资源）
命令：npm i html-webpack-plugin html-loader --save-dev
配置webpack.config.js：
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
8、在
./src/index.html中新建html文件
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webpack 4 quickstart</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
9、运行npm run build（此时页面已经有显示）
10、配置加载css：mini-css-extract-plugin（webpack4.2.0以上才可用，将css提取到文件中 ）
npm i mini-css-extract-plugin css-loader --save-dev
在index.js中导入css文件，然后配置webpack.config.js
配置如下：
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};
11、配置webpack dev server（每次更改，自动更新界面，开发时使用非常方便）
安装命令：npm i webpack-dev-server --save-dev
配置package.js
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
}
运行npm run start，修改文件即可动态更新界面效果
有些代码是从别处引用，自己整理文档，主要用于自己参考学习-.-
附：
babel常见插件作用
* babel: ES6转义的核心包
* babel-cli: 用于在终端使用babel,用命令行转码
* babel-core: 如果某些代码需要调用Babel的API进行转码，就要使用`babel-core`模块
* babel-loader: 执行转义的核心包
* babel-plugin-react-transform: 代替react-hot-loader的插件
* babel-preset-es2015: 现在被babel-preset-env取代了，被babel未来不会过时的（future-proof）”解决方案
* babel-preset-react: 转义react的jsx语法,
* babel-preset-stage-0: ”stage-0"是对ES7一些提案的支持，Babel通过插件的方式引入，包含stage-1, stage-2以及stage-3的所有功能
完！
参考网站：http://www.css88.com
阅读更多
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
- React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)
- React系列学习笔记：1.React与webpack基本配置
- VUE 利用webpack 给生产环境和发布环境配置不同的接口地址
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
- iis7 发布mvc 遇到的HTTP错误 403.14-Forbidden Web 服务器被配置为不列出此目录的内容
- webpack安装配置使用教程详解
- iis7 发布mvc3 遇到的HTTP错误 403.14-Forbidden Web 服务器被配置为不列出此目录的内容
- iis7 发布mvc 遇到的HTTP错误 403.14-Forbidden Web 服务器被配置为不列出此目录的内容
- 使用 React和webpack开发和打包发布
- react-webpack 学习笔记～～第一步～环境
- Material-UI + React + Babel + Webpack 环境配置
- iis7 发布mvc 遇到的HTTP错误 403.14-Forbidden Web 服务器被配置为不列出此目录的内容
- webpack react-hot-loader配置