前言
最近在学习 webpack 基础使用，项目优化等问题。总感觉要写点东西记录一下。如果你对webpack感兴趣的话，可以跟着这篇文章来尝试搭建（大神自行略过），好了废话不多说直接进入正文。
一、项目搭建
初始化项目
mkdir react-webpack-demo
cd react-webpack-demo
npm init -y
安装 webpack，webpack4 将 webpack-cli 从 webpack 中分离了出来，所以这里要同时安装 webpack webpack-cli
npm i webpack webpack-cli -D
webpack 建议在局部安装，如果安装到全局，会锁定webpack版本，多项目使用 webpack 会因为版本问题导致项目构建失败
在 package.json 中增加运行命令
"scripts": {
"dev": "webpack"
}
接下来在项目下创建 src 文件和 src/index.js 作为入口文件（webpack 默认配置中 entry 入口是 src/index.js）
执行 npm run dev 会看到在项目下会生成一个 dist 目录（打包成功）
到目前为止一个 webpack 项目已经搭建完成，下面将开始 webpack 配置以及搭建一个 react 项目
二、loader
首先在项目下创建 webpack.config.js，下文中会直接使用默认配置中的属性将不再全部展示。请读者自行根据属性进行辨别。
/**** webpack.config.js ***/
// webpack 默认配置
const path = require('path');
module.exports = {
// 项目入口文件 支持 str | [] | {}
entry: path.resolve(__dirname, './src/index.js'),
// 项目出口
output: {
path: path.resolve(__dirname, './dist'),
filename: 'mian.js'
},
// 打包环境 默认是生产环境 production
// 如果是开发环境 这里需要换成 development
// 接下来为了观察打包后的文件，使用 development
mode: 'development',
// 模块 这些选项决定了如何处理项目中的不同类型的模块。
module: {},
// 插件
plugins: [],
// 是否开启 source-map
devtool: 'cheap-module-eval-source-map'
}
webpack 默认只支持 js/json，可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。
安装 style-loader/css-loader/file-loader
npm i css-loader style-loader file-loader -D
// webpack.config.js
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
},
]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {},
},
],
}
]
},
ok 现在你可以随意打包css文件和图片资源了。
目前为止一切运行的都没有问题，我们尝试着在入口文件中写一些代码
const arr = [new Promise(() => { }), new Promise(() => { })];
arr.map(item => {
console.log(item);
})
打包后查看文件
我们想要的效果是可以转换成 ES5 的代码来做浏览器兼容，OK开整。
这里使用babel来做代码转化
// 安装
npm i babel-loader @babel/core @babel/preset-env -D
// 在webpack.config.js中使用
module: {
rules: [
{
test: /\.js/,
loader: 'babel-loader'
}
]
},
根目录下新建 .babelrc 文件来配 babel-loader 的配置项
// .babelrc
{
"presets": ["@babel/preset-env"]
}
运行打包 npm run dev
到目前为止任务完成一半，Promise 等最新的特性还没有转换成功。
继续安装 @babel/polyfill 并在入口文件中引入
// 安装
npm i @babel/polyfill -D
// index.js
import '@babel/polyfill';
OK 现在编译成功了，生成的代码已经全部成功转成ES5的代码，但是
明明刚才才 几k 的代码，现在直接 400多k。原因是因为 webpack 会直接将 polyfill 中的方法全部打包到dist中去，可是明明我只使用了 Promise 这明显不是我想要的结果。
这里就需要配置 useBuiltIns 了
// 重新更改 .babelrc 文件
{
"presets": [
[
"@babel/preset-env",
{
// 描述您为项目支持/目标的环境
"targets": {
"browsers": ["> 1%", "last 2 versions"]
},
"corejs": 2, //新版本需要指定核⼼库版本
// "usage"| "entry"| false，默认为false
"useBuiltIns": "usage" //按需注⼊
}
]
]
}
到目前为止webpack使用babel基础功能基本结束，更多 loader 请参考官方 https://www.webpackjs.com/loaders/
三、plugins
先看一波官方描述
webpack 有着丰富的插件接口(rich plugin interface)。webpack 自身的多数功能都使用这个插件接口。这个插件接口使 webpack 变得极其灵活。
上一步只是实现了打包css/js/图片资源打包的功能。下面我们将借助插件实现自动生成 html 文件。每次部署自动清空 dist 目录等基本功能
首先老套路，安装插件
npm i html-webpack-plugin clean-webpack-plugin -D
项目中使用，首先在项目下创建 index.html 模板
const htmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [
// 复制一个 html 并将最后打包好的资源在 html 中引入
new htmlWebpackPlugin({
// 页面title 需要搭配 ejs 使用
title: "测试title",
// html 模板路径
template: "./index.html",
// 输出文件名称
filename: "index.html",
minify: {
// 压缩HTML⽂件
removeComments: true, // 移除HTML中的注释
collapseWhitespace: true, // 删除空⽩符与换⾏符
minifyCSS: true // 压缩内联css
}
}),
// 每次部署时清空 dist 目录
new CleanWebpackPlugin()
],
开始搭建 react 项目
首先安装 react react-dom
npm i react react-dom -S
src 下重新创建 react.js 文件
import React, { Component } from 'react';
import ReactDom from 'react-dom';
class App extends Component {
render() {
return <div>
hello word`12
</div>
}
}
// 需要在 index.html 中增加一个 div标签 id 设置为 'app'
ReactDom.render(<App />, document.getElementById('app'));
修改 webpack.config.js
entry: path.resolve(__dirname, './src/react.js'),
output: {
path: path.resolve(__dirname, './dist'),
// 模块标识符(module identifier)的 hash 取前8位
filename: 'main_[hash:8].js'
},
在执行打包，会有一个报错，webpack 并不认识 react 的语法
安装 @babel/preset-react
npm i @babel/preset-react -D
在 .babelrc 中配置一下 @babel/preset-react
{
"presets": [
[
"@babel/preset-env",
{
// 描述您为项目支持/目标的环境
"targets": {
"browsers": ["> 1%", "last 2 versions"]
},
"corejs": 2, //新版本需要指定核⼼库版本
"useBuiltIns": "usage" //按需注⼊
}
],
"@babel/preset-react"
]
}
OK 现在 react 项目就可以正常打包了。但是我们日常开发中并不会每次打完包再来看效果，这里的话就需要起一个服务并且配值热更新了。
首先我们需要安装 webpack-dev-server
npm i webpack-dev-server -D
配置 webpack.config.js 文件
const webpack = require('webpack')
module.exports = {
// devServer和entry是平级的
devServer: {
// 指向打包后的文件地址
contentBase: './dist',
// 是否自动打开一个新窗口
open: true,
// 端口号
port: 8081,
// 是否开启热更新
hot: true,
// 启用热模块替换，而不会在构建失败时将页面刷新作为后备。
hotOnly: true
},
plugins: [
// 启用模块热替换(HMR - Hot Module Replacement)
new webpack.HotModuleReplacementPlugin()
]
}
在package.json 中新增一条命令
"scripts": {
"server": "webpack-dev-server"
}
到目前为止一个基础版的 react 就已经搭建完成了，下一篇分享将如何使用 webpack 优化项目。git 地址 https://github.com/shanyq1673/webpack-react
webpack 项目优化 请大家跳到 webpack 从0开始搭建 react（优化篇）
