创建项目
- 创建项目文件夹，并使用npm init生成初始package.json
mkdir project
cd project
npm init -y
- 创建完成后，创建项目目录结构
├── config # webpack配置
├── webpack.base.js # 公共配置
├── webpack.dev.config.js # 开发环境配置
└── webpack.prod.config.js # 打包发布环境配置
├── example # 开发时预览代码
├── src # 示例代码目录
├── app.js # 入口 js 文件
└── index.html # 入口 html 文件
├── lib # 组件打包结果目录
├── node_modules # 安装依赖时自动生成
├── 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 相关
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,该项目采用Less，因此需要安装less-loader
npm i css-loader style-loader less less-loader -D
-
执行完成后package.json如下图
image
tip：如报错：Error: Cannot find module 'webpack-cli/bin/config-yargs'
将webpack-cli版本替换为3.3.12
配置webpack以及babel
- 在config文件夹下创建三个文件
- webpack.base.js
- webpack.dev.config.js
- webpack.prod.config.js
- 公共部分的webpack配置放在webpack.base.js文件中，利用webpack-merge进行合并
module.exports ={
module:{
rules:[
{
test:/\.(js|jsx)$/i,
use: {
loader:'babel-loader',
},
include: /src/,
}
]
}
}
- 开发时的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)
- 打包时采用的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中配置开发和打包命令
"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"
]
}
- 以上，则完成了脚手架的搭建。
开发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; }
- 为了进行预览，则在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,原因是因为在开发过程中(webpack-dev-server)不会实际生成bundle.js，打包好的文件是在内存中，如需实时预览，需在html中引入，或使用html-webpack-plugin注入，如需详细了解请参照 webpack官方文档
-
最后执行npm run start 命令 如出现下图及浏览器打开3000端口则表示成功
image -
浏览器出现页面
image
