前言
从实习开始,一直都是在做零零碎碎的东西,辗转于各种业务需求之间,从来没有从0到1跟过一个完整的项目,这就导致我所有学过的知识很零散,不具有连贯性和实操性。我意识到这样辗转于各种业务需求之间,并不会促进我自身的进步,更为危险的是这将浪费一个菜鸟最为宝贵的成长时机。既然没有机会,那我就自己创造机会。因此,有了TS+React环境搭建、npm包的发布、脚手架搭建这一系列从0到1的笔记。(这是一个一心想搞好技术的菜鸟的自我记录,不足之处,还望各位大佬多多提点)
从webpack入手
安装webpack工具
npm i webpack webpack-cli --save-dev
使用版本:
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
配置webpack
个人习惯将不同配置环境文件拆分开(具体配置见官网),遵循一步一测的原则。
1.先配置公共common文件
const path = require('path')
module.exports = {
entry: {
app: path.resolve(__dirname, '../../src/main.js'),
},
output: {
filename: 'js/[name].[hash:8].js',
path: path.resolve(__dirname, '../../dist'),
},
}
2.更改package.json文件
{
"scripts": {
"build": "webpack --config ./scripts/config/webpack.common.js",
},
}
3.运行
npm run build
可以看到根目录下出现了dist文件夹。
区分开发和生产环境
为适应不同环境的需求,我们通过webpack-merge 来适配不同环境的webpack配置文件
npm install webpack-merge -D
接下来分别在webpack.dev.js和webpack.prod.js文件中配置如下:
// webpack.dev.js文件
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')
module.exports = merge(common, {
mode: 'development',
});
//webpack.prod.js文件
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')
module.exports = merge(common, {
mode: 'production',
})
考虑到不同操作系统设置环境变量的方式不一定相同,比如 Mac 电脑上使用 export NODE_ENV=development
,而 Windows 电脑上使用的是 set NODE_ENV=development
,因此使用cross-env这个工具来实现跨平台设置和使用环境变量。
npm install cross-env -D
接下来需更改package.json文件
"scripts": {
"start": "cross-env NODE_ENV=development webpack --config ./scripts/config/webpack.dev.js",
"build": "cross-env NODE_ENV=production webpack --config ./scripts/config/webpack.prod.js"
},
此时,运行两条命令皆可看到根目录下生成dist文件,说明目前配置是成功的。
本地服务实时查看页面
执行npm run start ,它直接起一个本地服务,然后页面就出来了。而现在执行这个命令却只能简单的打个包,此时,需借助 webpack-dev-server 和 html-webpack-plugin 实现,现在先把它们安装下来:
npm install webpack-dev-server html-webpack-plugin -D
使用版本:
"html-webpack-plugin": "^4.5.1",
"webpack-dev-server": "^3.11.2",
工具作用:
html-webpack-plugin
:每一个页面是一定要有html
文件的,而这个插件能帮助我们将打包后的 js 文件自动引进html
文件中,毕竟你不可能每次更改代码后都手动去引入 js 文件。webpack-dev-server
:可以在本地起一个 http 服务,通过简单的配置还可指定其端口、热更新的开启等。
因为 html-webpack-plugin
在开发和生产环境我们都需要配置,所以在 webpck.common.js
增加以下内容 :
const HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports = {
entry: {...},
output: {...},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(PROJECT_PATH, './public/index.html'),
filename: 'index.html',
cache: false, // 特别重要:防止之后使用v6版本 copy-webpac