創(chuàng)建項(xiàng)目
- 創(chuàng)建項(xiàng)目文件夾，并使用npm init生成初始package.json
mkdir project
cd project
npm init -y
- 創(chuàng)建完成后，創(chuàng)建項(xiàng)目目錄結(jié)構(gòu)
├── config # webpack配置
├── webpack.base.js # 公共配置
├── webpack.dev.config.js # 開發(fā)環(huán)境配置
└── webpack.prod.config.js # 打包發(fā)布環(huán)境配置
├── example # 開發(fā)時(shí)預(yù)覽代碼
├── src # 示例代碼目錄
├── app.js # 入口 js 文件
└── index.html # 入口 html 文件
├── lib # 組件打包結(jié)果目錄
├── node_modules # 安裝依賴時(shí)自動(dòng)生成
├── src # 組件源代碼目錄
├── index.less# 組件樣式
└── index.js # 組件源代碼
├── .babelrc # babel 配置
├── .npmignore # 需要忽略的文件和文件夾
├── README.md
└── package.json
安裝依賴
- 安裝webpack以及cli
npm i webpack webpack-cli webpack-dev-server webpack-merge -D
- 安裝react 相關(guān)
npm i react react-dom -D
- 安裝babel編譯依賴
npm i @babel/cli @babel/core @babel/preset-env @babel/preset-react -D
- 安裝babel-loader(編譯jsx)以及MiniCssExtractPlugin(提取css)
npm i babel-loader mini-css-extract-plugin -D
- 安裝css-loader,style-loader,該項(xiàng)目采用Less，因此需要安裝less-loader
npm i css-loader style-loader less less-loader -D
-
執(zhí)行完成后package.json如下圖
image
tip：如報(bào)錯(cuò)：Error: Cannot find module 'webpack-cli/bin/config-yargs'
將webpack-cli版本替換為3.3.12
配置webpack以及babel
- 在config文件夾下創(chuàng)建三個(gè)文件
- webpack.base.js
- webpack.dev.config.js
- webpack.prod.config.js
- 公共部分的webpack配置放在webpack.base.js文件中，利用webpack-merge進(jìn)行合并
module.exports ={
module:{
rules:[
{
test:/\.(js|jsx)$/i,
use: {
loader:'babel-loader',
},
include: /src/,
}
]
}
}
- 開發(fā)時(shí)的webpack配置文件為webpack.dev.config.js
const path = require('path');
const {merge} = require('webpack-merge');
const baseConfig = require('./webpack.base.js');
const devConfig = {
mode: 'development',
entry: path.join(__dirname, '../example/src/app.js'),
output: {
path: path.join(__dirname, '../example/src'),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.less$/i,
exclude: /\node_modules/,
use: [
{
loader: "style-loader"
},
{
loader: 'css-loader?modules',
},
{
loader: "less-loader",
}
]
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
},
{
test: /\.min.css$/i,
use: ['style-loader', "css-loader"]
}
]
},
devServer: {
contentBase: path.join(__dirname, '../example/src/'),
compress: true,
host: '127.0.0.1',
port: 3000,
open: true
},
}
module.exports = merge(devConfig, baseConfig)
- 打包時(shí)采用的webpack配置文件為webpack.prod.config.js
const path = require('path');
const baseConfig = require('./webpack.base.js');
const {merge} = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const prodConfig = {
mode: 'production',
entry: path.join(__dirname, '../src/index.js'),
output: {
path: path.join(__dirname, '../lib/'),
filename: 'index.js',
libraryTarget: 'umd',
libraryExport: 'default'
},
module: {
rules: [
{
test: /\.less$/i,
exclude: /\node_modules/,
use : [
MiniCssExtractPlugin.loader,
{ loader: "css-loader?modules" },
{ loader: "less-loader" }
]
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'index.css'
})
],
externals: {
react: {
root: 'React',
commonjs: 'react',
commonjs2: 'react',
amd: 'react'
},
'react-dom': {
root: 'ReactDom',
commonjs: 'react-dom',
commonjs2: 'react-dom',
amd: 'react-dom'
}
}
}
module.exports = merge(prodConfig, baseConfig)
- 編寫完成配置文件后，需要在package.json中配置開發(fā)和打包命令
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --config config/webpack.dev.config.js",
"build": "webpack --config config/webpack.prod.config.js",
"publish": "npm run build && npm run publish"
配置babel
- 使用babel將es6+代碼編譯為es5版本，在.babelrc文件中加入
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
- 以上，則完成了腳手架的搭建。
開發(fā)Demo
- 在src/index.js中輸入
import React from 'react';
import styles from './index.less';
class ReactDemo extends React.Component{
render () {
return ' hello world'
}
}
export default ReactDemo;
- 在樣式文件index.less中加入
.wrapper{ background: red; }
- 為了進(jìn)行預(yù)覽，則在example中加入index.html以及app.js
// index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
<script src="bundle.js"></script>
</html>
// app.js
import React from 'react'
import { render } from 'react-dom'
import Index from '../../src'
const App = () =>
<Index />
render(<App />, document.querySelector('#root'))
此處index.html中引入bundle.js,原因是因?yàn)樵陂_發(fā)過程中(webpack-dev-server)不會(huì)實(shí)際生成bundle.js，打包好的文件是在內(nèi)存中，如需實(shí)時(shí)預(yù)覽，需在html中引入，或使用html-webpack-plugin注入，如需詳細(xì)了解請(qǐng)參照 webpack官方文檔
-
最后執(zhí)行npm run start 命令 如出現(xiàn)下圖及瀏覽器打開3000端口則表示成功
image -
瀏覽器出現(xiàn)頁面
image
