从零创立webpack4+react我的项目
创立我的项目文件夹，并进入文件夹
mkdir webpck-react-demo
cd webpck-react-demo初始化我的项目，生成package.json
npm init -y装置webpack及其脚手架
–save-dev 开发时的依赖 –save 运行时的依赖
node 5 以上版本在执行npm install命令时会主动生成package-lock.json文件
package.json与package-lock.json的区别👈
npm install --save-dev webpack webpack-cli创立并进入config文件夹
mkdir config
cd config创立 webpack.common.config.js 文件
cat > webpack.base.config.js // 创立文件
Crtl+D // 退出并保留
const path = require('path');
module.exports = {
entry: { // 入口文件
app: './src/app.js',
},
output: { // 编译打包后的文件名及所在门路
filename: 'js/budle.js', // 打包输入的文件名字
path: path.resolve(__dirname, '../dist') // 输入门路
}
}在webpck-react-demo我的项目文件夹下创立src文件夹，并在src中创立app.js文件
创立文件能够应用命令，也能够间接手动创立~
cd ../
mkdir src
cd src
cat > app.js
Crtl + Dpackage.json文件减少运行命令
新增 start 命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --config ./config/webpack.base.config.js"
},此时的我的项目构造
当初曾经能够运行 yarn start 来尝试打包文件了，执行命令后将会生成一个dist文件夹，外面蕴含了js/budle.js文件,打包的是app.js文件
装置 webpack-merge 依赖
webpack-merge治理配置，能够基于一个base文件管控不同环境下的配置
yarn add webpack-merge在config文件夹下创立 webpack.dev.config.js 和 webpack.prod.config.js 文件，并在prod文件内写入以下代码
// ⚠️ 留神merge的引入形式
const { merge } = require('webpack-merge');
const common = require('./webpack.base.config.js');
module.exports = merge(common, {
mode: 'production',
});在根目录下创立 public 文件夹，并在public内创立 index.html 文件，写入以下内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>从零创立webpack4+react我的项目</title>
</head>
<body>
<div id="root"></div>
<script src="../dist/js/budle.js"></script>
</body>
</html>在app.js写入以下代码
var root =document.getElementById('root');
root.innerHTML = 'hello, webpack!';在 package.json 文件内减少命令
新增 build 命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --config ./config/webpack.base.config.js",
"build": "webpack --config ./config/webpack.prod.config.js"
},此时我的项目目录为
当初能够尝试运行 yarn build 命令了，能够查看一下dist/js/bundle.js文件，也能够间接点开 index.html 文件在浏览器端查看~
⚠️ 打包后才会呈现dist文件夹
装置React
yarn add react react-domsrc目录下创立index.js，并写入如下内容
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
ReactDOM.render(<App />, document.getElementById('root'));更改app.js文件
应用jsx语法
import React from 'react';
const App = () => {
return (
<div className="App">Hellow World</div>
);
}
export default App;装置babel相干模块
该模块用来编译转码，webpack无奈辨认jsx语法
yarn add babel-loader @babel/preset-react @babel/preset-env @babel/core在根目录下创立.babelrc文件，配置babel，并写入以下代码
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
// 大于相干浏览器版本无需用到 preset-env
"edge": 17,
"firefox": 60,
"chrome": 67,
"safari": 11.1
},
// 依据代码逻辑中用到的 ES6+语法进行办法的导入，而不是全副导入
"useBuiltIns": "usage"
}
],
"@babel/preset-react"
]
}配置webpack.base.config.js文件
入口文件更改为index.js
增加moudle模块 – 解决babel
entry: { // 入口文件
app: './src/index.js',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/,
}
]
}
此时的我的项目目录为
当初能够尝试执行一下yarn build，也能够在浏览器中运行一下index.html
持续性更新
发表回复