前几天一直在学习 webpack, 总算比之前学习的时候有了点收获, 所以在昨天发布了一篇 webpack 入门笔记, 今天继续使用 webpack 练了练手, 搭建了一个 React 开发环境, 如果还不熟悉的童鞋可以看一下昨天发布的笔记: 入门 webpack 笔记 https://github.com/zhongdeming428/Blog/issues/13
一, 初始化项目文件夹
在任意目录下, 新建一个文件夹作为你的项目文件夹, 命名随意. 随后使用命令行工具, 切换到该文件夹, 键入 npm init 进行初始化 (遇到的问题一直回车就好了), 初始化完成之后可以看到生成了一个 package.json 文件.
随后在该项目文件夹下新建两个文件夹:/dist 和 / src, 其中 / src 用于放置开发的源码,/dist 用于放置 "编译" 后的代码.
随后在 / src 目录下新建 index.html,index.CSS 和 index.js 文件
二, 安装 webpack 工具
通过命令行使用 webpack 4 需要安装两个模块: webpack 和 webpack-cli, 都安装为开发环境依赖.
npm install -D webpack webpack-cli
安装完成之后可以看到你的 package.json 文件发生了变化, 在 devDependencies 属性下多了两个包的属性.
三, 配置最基本的 webpack
1. 安装最基本的插件:
npm install -D html-webpack-plugin clean-webpack-plugin webpack-dev-server css-loader webpack-merge style-loader
2. 在项目文件夹下新建文件
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(['dist'])
- ]
- };
其中,/src/index.html 是你的网站入口 HTML 文件,/src/index.js 是你的入口 js 文件.
3. 在项目文件夹下新建
webpack.dev.conf.js
文件, 表示开发环境下的配置. 内容如下:
- const merge = require('webpack-merge');
- const baseConfig = require('./webpack.base.conf.js');
- module.exports = merge(baseConfig, {
- mode: 'development',
- devtool: 'inline-source-map',
- devServer: {
- contentBase: './dist',
- port: 3000
- }
- });
4. 在项目文件夹下新建
webpack.prod.conf.js
文件, 表示生产环境的配置, 内容如下:
- const merge = require('webpack-merge');
- const baseConfig = require('./webpack.base.conf.js');
- console.log(__dirname);
- module.exports = merge(baseConfig, {
- mode: 'production'
- });
四, 配置 npm scripts
配置了三个配置文件以满足两个不同环境下的代码构建, 使用语义化较好的 npm scripts 来构建代码有利于简化工作.
添加新的 scripts 内容到 package.json 文件的 scripts 属性, 记得用双引号引起来, 其属性如下:
- // package.json
- {
- "scripts": {
- "start": "webpack-dev-server --open --config webpack.dev.conf.js",
- "build": "webpack --config webpack.prod.conf.js"
- }
- }
配置完之后, 可以尝试修改 / src/index.html,/src/index.js 或 / src/index.css, 运行 npm scripts 命令查看效果.
比如按照以下内容创建文件:
- index.html
- <html>
- <head>
- <meta charset="utf-8"/>
- <title>React & Webpack</title>
- </head>
- <body>
- <div id="root">
- <h1>Hello React & Webpack!</h1>
- </div>
- </body>
- </html>
- index.css
- body {
- background-color: blue;
- }
- #root {
- color: white;
- background-color: black;
- }
- index.js
- import './index.css';
- console.log('Success!');
随后使用命令 npm run start, 即可看到效果. 修改 css 或者 js 文件, 保存之后可以看到浏览器自动刷新并且展示出了你刚刚所做的更改.
做到这里, 一个基本的开发环境已经搭建出来了, 下一步就是针对 React 特定的环境, 配置不同的 webpack 来进行构建.
使用 React 开发, 主要是 ES6(虽然最近所有高级浏览器都已经支持 ES6, 但是还是要为低级 IE 做准备) 和 React 的 JSX 语法需要进行转换. 下面针对这两种语法进行配置.
五, 配置 Babel
Babel 是一个优秀的 JavaScript 编译器 (这句话源自 Babel 官网 https://babel.bootcss.com/ ), 通过 Babel 的一些插件, 可以将 JSX 语法, ES6 语法转换为 ES5 的语法, 使得低级浏览器也可以运行我们写的代码.
(1) 安装 Babel 预设
通过以下命令安装 Babel 预设, babel-loader,babel-polyfill 和 babel-preset-react:
npm install -D babel-preset-env babel-loader babel-polyfill babel-preset-react
(2) 配置. babelrc
在项目文件夹的根目录下新建一个. babelrc 的文件 (Windows 下无法直接创建, 可以通过将文件命名为. babelrc. 达到创建的目的), 在文件内输入以下内容:
- {
- "presets": ["env", "react"]
- }
(3) 配置
webpack.base.conf.js
在 module.rules 中插入一个新对象, 内容如下:
- {
- test: /\.js$/,
- use: 'babel-loader',
- exclude: /node_modules/
- }
(4) 安装 react 和 react-dom 模块
npm install --save react react-dom
(5) 开始开发
在 / src 中新建一个 App.js 文件, 内容如下:
- import React from 'react';
- class App extends React.Component {
- render() {
- return <div>
- <h1>Hello React & Webpack!</h1>
- <ul>
- {
- ['a', 'b', 'c'].map(name => <li>{`I'm ${name}!`}</li> )
- }
- </ul>
- </div>
- }
- }
- export default App;
清空 index.js 之后在其中写入如下内容:
- import React from 'react';
- import ReactDOM from 'react-dom';
- import App from './App';
- import './index.css';
- ReactDOM.render(<App/>, document.getElementById('root'));
使用 npm run start 命令打开页面可以看到使用 React 写出来的效果了.
打开浏览器查看编译后的代码, 找到 App 组件中的 map 函数这一段, 可以发现 ES6 的语法已经被转换到了 ES5 的语法:
- ['a', 'b', 'c'].map(function (name) {
- return _react2.default.createElement(
- 'li',
- null,
- 'I\'m '+ name +'!'
- );
- })
箭头函数被写成了 function 匿名函数.
六, 说明
上面的步骤, 我已经重新跑了一遍, 一步一步按照来就可以搭建成功, 有兴趣的童鞋可以照着跑一遍.^_^
另外如果还有错误的话, 请提醒我一下, 我一定会马上改正的!
来源: https://juejin.im/post/5afc29fa6fb9a07ab379a2ae