一、初始化项目文件夹
在任意目录下,新建一个文件夹作为你的项目文件夹,命名随意。随后使用命令行工具,切换到该文件夹,键入npm init
进行初始化(遇到的问题一直回车就好了),初始化完成之后可以看到生成了一个package.json
文件。
随后在该项目文件夹下新建两个文件夹:/dist
和/src
,其中/src
用于放置开发的源码,/dist
用于放置“编译”后的代码。
随后在/src
目录下新建index.html
、index.css
和index.js
文件
按照以下内容创建文件:
index.html
1 | <html> |
index.css
1 | body { |
index.js
1 | import './index.css'; |
二、安装webpack工具
通过命令行使用webpack 4需要安装两个模块:webpack和webpack-cli,都安装为开发环境依赖。
1 | npm install -D webpack webpack-cli |
安装完成之后可以看到你的package.json
文件发生了变化,在devDependencies属性下多了两个包的属性。
三、配置最基本的webpack
1.安装最基本的插件:
1
npm install -D html-webpack-plugin clean-webpack-plugin webpack-dev-server css-loader webpack-merge style-loader
2.在项目文件夹下新建文件
webpack.base.conf.js
,表示最基本的配置文件,内容如下:
````webpack.base.conf.js`
const path = require(‘path’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’)
module.exports = {
entry: ‘./src/index.js’,
output: {
filename: ‘bundle.[hash].js’,
path: path.join(__dirname, ‘/dist’) //打包生成文件地址
},
module: {
rules: [
{
test: /.css$/,
use: [‘style-loader’, ‘css-loader’]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: ‘./src/index.html’
}),
new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: [‘./dist’]
})
]
};
1 |
|
在项目文件夹下新建webpack.prod.conf.js
文件,表示生产环境的配置,内容如下:
1 | const merge = require('webpack-merge'); |
四、配置npm scripts
配置了三个配置文件以满足两个不同环境下的代码构建,使用语义化较好的npm scripts
来构建代码有利于简化工作。
添加新的scripts内容到package.json
文件的scripts
属性,记得用双引号引起来,其属性如下:
1 | // package.json |
配置完之后,可以尝试修改/src/index.html
、/src/index.js
或/src/index.css
,运行npm run start命令查看效果。
做到这里,一个基本的开发环境已经搭建出来了。
五、配置Babel
Babel是一个优秀的JavaScript编译器(这句话源自Babel官网),通过Babel的一些插件,可以将JSX语法、ES6语法转换为ES5的语法,使得低级浏览器也可以运行我们写的代码。
安装 babel-loader
,@babel/core
,@babel/preset-env
,@babel/preset-react
作为 dev 依赖项
1 | npm i babel-loader@8 @babel/core @babel/preset-env @babel/preset-react -D |
- babel-loader:使用 Babel 转换 JavaScript依赖关系的 Webpack 加载器
- @babel/core:即 babel-core,将 ES6 代码转换为 ES5
- @babel/preset-env:即 babel-preset-env,根据您要支持的浏览器,决定使用哪些 transformations / plugins 和 polyfills,例如为旧浏览器提供现代浏览器的新特性
- @babel/preset-react:即 babel-preset-react,针对所有 React 插件的 Babel 预设,例如将 JSX 转换为函数
**注:babel 7 使用了 @babel
命名空间来区分官方包,因此以前的官方包 babel-xxx 改成了 @babel/xxx
修改webpack.base.conf.js
和 创建.babelrc
文件,并配置 babel-loader 及 babel 选项
1 | module.exports = { |
1 | { |
六、配置react
1 | npm install --save react react-dom |
在/src
中新建一个App.js
文件,内容如下
1 | import React from 'react'; |
清空index.js
之后在其中写入如下内容:
1 | import React from 'react'; |
使用npm run start
命令打开页面可以看到使用React写出来的效果了。
打开浏览器查看编译后的代码,找到App组件中的map函数这一段,可以发现ES6的语法已经被转换到了ES5的语法:
1 | ['a', 'b', 'c'].map(function (name) { |
箭头函数被写成了function匿名函数。
七、配置TypeScript
执行以下命令安装 TypeScript compiler 和 loader:
1 | npm install --save-dev typescript ts-loader |
在根目录新建一个tsconfig.json文件
1 | { |
然后在webpack.dev.conf.js配置
1 | const path = require('path'); |
这个时候就可以使用ts了。 ps: 在ts中引用都要申明类型。
1 | import * as React from "react"; // 这样没有申明的react会报错、 所以应该npm install @types/react |