1.初始化项目
1.新建一个目录,然后初始化项目
npm init
2.在package.json中加入以下依赖
// dependencies是指在使用npm i -save [modules] 的时候安装的,执行 npm install --production 的时候会安装
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.1"
},
// devDependencies是指在使用npm i -save-dev [modules] 的时候安装的,执行 npm install --production 的时候不会安装
"devDependencies": {
// 安装babel相关的
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"babel-polyfill": "^6.26.0",
// 插件:每次build的时候清空旧文件
"clean-webpack-plugin": "^3.0.0",
// css处理
"css-loader": "^2.1.1",
// 处理CSS兼容
"postcss-loader": "^3.0.0",
"autoprefixer": "^9.6.0",
// 添加less支持
"less": "^3.9.0",
"less-loader": "^5.0.0",
// 插件
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
// 添加webpack打包
"webpack": "^4.33.0",
"webpack-cli": "^3.3.3",
// 提供web容器,可在本地访问http://localhost:port
"webpack-dev-server": "^3.7.1",
// 提供配置文件的合并
"webpack-merge": "^4.2.1"
}
注:dependencies和devDependencies的区别
我们在使用npm install 安装模块或插件的时候,有两种命令把他们写入到 package.json 文件里面去,他们是:
--save-dev
或
--save
首先需要说明的是Dependencies一词的中文意思是依赖和附属的意思,而dev则是develop(开发)的简写。
所以它们的区别在 package.json 文件里面体现出来的就是,使用 --save-dev 安装的 插件,被写入到
devDependencies 域里面去,而使用 --save 安装的插件,则是被写入到dependencies 区块里面去。
那 package.json 文件里面的 devDependencies 和 dependencies 对象有什么区别呢?
npm install 【插件名】或 npm install 【插件名】--save 归属dependencies,表示代码运行时所需要的包。
npm install 【插件名】--save-dev 归属 devDependencies,表示开发时依赖的插件(即不会打包至线上)。
devDependencies 里面的插件只用于开发环境,不用于生产环境,而 dependencies 是需要发布到生产环境的。
比如我们写一个项目要依赖于jQuery,没有这个包的依赖运行就会报错,这时候就把这个依赖写入dependencies ;
而我们使用的一些构建工具比如glup、webpack这些只是在开发中使用的包,上线以后就和他们没关系了,所以将它写入devDependencies。
2.安装以上依赖
npm install
3.配置bable
在根目录下新建一个.babelrc文件
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
]
}
4.在根目录增加一个postcss.config.js
module.exports = {
plugins: {
'autoprefixer': {browsers: 'last 5 version'}
}
}
5.在根目录新建一个webpack.base.config.js作为基础webpack的配置
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', 'postcss-loader']
}, {
test: /\.js[x]?$/,
use: 'babel-loader',
exclude: /node_modules/
}, {
test: /\.less$/,
use: ['style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'less-loader'],
}
]
},
// 配置相应的插件
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new CleanWebpackPlugin()
]
};
6.在根目录下新建webpack.dev.config.js文件作为开发环境的配置
该文件的目的是为了启动webpack
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.config.js');
module.exports = merge(baseConfig, {
// 设置为开发模式
mode: 'development',
devtool: 'inline-source-map',
// 配置服务端目录和端口
devServer: {
contentBase: './dist',
port: 3000
}
});
7.在根目录下新建webpack.product.config.js文件作为生产环境的配置
该文件的目的是为了打包webpack
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.config.js');
module.exports = merge(baseConfig, {
// 设置为生产模式
mode: 'production'
});
8.package.json中配置script命令
用来执行npm run start (启动)和 npm run build (打包)
"scripts": {
"start": "webpack-dev-server --open --config webpack.dev.config.js",
"build": "webpack --config webpack.product.config.js"
},
9.在根目录新建src目录,和index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
10.在src新建入口文件index.js和App.js
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.less';
ReactDOM.render(<App/>, document.getElementById('root'));
App.js
import React from 'react';
class App extends React.Component {
render() {
return <div>
<h1 className="hello">Hello React & Webpack!</h1>
</div>
}
}
export default App;
11.在src目录新建index.less文件,测试less文件
@blog-color-red: #ff0000;
.hello {
color: @blog-color-red;
}
12.运行程序
npm run start
13.打包文件
npm run build
不出意外的话会在根目录下生成dist文件,可以在文件夹中之间打开该文件,显示红色的**Hello React & Webpack!**字样