Table of Contents
- 1. 基本运行环境（环境参考 react)
- 1.1. 添加 package.json
- 1.2. 安装基础包
- 1.3. 添加 index.html
- 1.4. 添加 webpack.config.js 文件
- 1.5. 添加 src 文件夹, 并添加文件 ./src/index.js
- 1.6. 添加文件 ./src/App.js
- 1.7. 执行打包命令
- 2. 参考目录
- 3. 关联调试代码的位置信息
- 4. 处理 css 文件
- 4.1. 安装包
- 4.2. 配置 webpack.config.js
- 5. 处理图片
- 5.1. 安装包
- 5.2. 配置 webpack.config.js
- 5.3. 使用方式
- 5.3.1. 直接使用文件的形式
- 5.3.2. css 方式
- 6. 处理字体
- 6.1. 安装包
- 6.2. 配置 webpack.config.js
- 6.3. 使用例子
- 6.3.1. 导入样式
- 6.3.2. 添加字体类和对应的图标类名称
- 7. 处理 less 文件
- 7.1. 安装包
- 7.2. 配置 webpack.config.js
- 8. style 代码检查工具
- 8.1. 安装包
- 8.2. 配置 package.json
- 8.3. 配置 webpack.config.js
- 9. 兼容旧版本的 css （IE 为例）
- 9.1. 安装包
- 9.2. 配置 package.json
- 9.3. 配置 webpack.config.js
- 10. js 代码检查工具
- 10.1. 安装包
- 10.2. 配置 eslint
- 10.3. 配置 webpack.config.js
- 10.4. 局部禁用的例子（仅供参考，根据提示操作）
- 11. devServer
- 11.1. 安装包
- 11.2. 配置 webpack.config.js
- 12. 给 html 自动注入 js，自动清理打包文件夹
- 12.1. 安装包
- 12.2. 配置 webpack.config.js
- 13. 多配置
- 13.1. 安装包
- 13.2. 在 package.json 中配置命令
- 13.3. 配置 webpack 配置文件
- 13.3.1. 公共部分
- 13.3.2. 开发环境
- 13.3.3. 开发环境（使用服务器 devServer）
- 13.3.4. 线上环境
- 14. 说明
- 14.1. 整体配置
- 14.1.1. package.json
- 14.1.2. webpack.config.js
- 14.1.3. .eslintrc.js
- 14.1. 整体配置
1 基本运行环境（环境参考 react)
1.1 添加 package.json
{
"name": "my-webpack",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.7.4",
"@babel/preset-env": "^7.7.4",
"@babel/preset-react": "^7.7.4",
"babel-loader": "^8.0.6",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10"
},
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0"
}
}
yarn init -y
1.2 安装基础包
yarn add react react-dom yarn add babel-loader @babel/core @babel/preset-env @babel/preset-react -D
1.3 添加 index.html
<html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <div id="app">div> <script type="text/javascript" src="dist/bundle.js">script> body> html>
1.4 添加 webpack.config.js 文件
webpack 打包的配置文件
module.exports = {
mode: 'development',
entry: './src/index',
output: {
filename: 'bundle.js'
},
module: {
rules: [
{
test: /.jsx?/i,
use : {
loader : 'babel-loader',
options : {
presets : ['@babel/preset-react']
}
}
},
]
}
};
1.5 添加 src 文件夹, 并添加文件 ./src/index.js
import React from 'react'; import {render} from 'react-dom'; import {App} from "./App"; render(, window.document.querySelector('#app') );
1.6 添加文件 ./src/App.js
import React from 'react'; class App extends React.Component { constructor() { super(); } render() { return (hello world
); } } export { App }
1.7 执行打包命令
npx webpack
2 参考目录
config 配置文件 public 不打包的静态资源 src/assets 伴随一起打包的静态资源 src/components 开发组件 src/pages 页面 src/store 存放如 redux 的数据
3 关联调试代码的位置信息
开启一些特性，上线要关闭
module.exports = {
mode: 'development',
entry: './src/index',
output: {
filename: 'bundle.js'
},
devtool : 'source-map',
module: {
rules: [
{
test: /.jsx?/i,
use : {
loader : 'babel-loader',
options : {
presets : ['@babel/preset-react']
}
}
},
]
}
};
4 处理 css 文件
如：import './App.css';
4.1 安装包
yarn add style-loader css-loader -D
4.2 配置 webpack.config.js
module.exports = {
mode: 'development',
entry: './src/index',
output: {
filename: 'bundle.js'
},
devtool: 'source-map',
module: {
rules: [
{
test: /.jsx?/i,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react']
}
}
},
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader'
]
}
]
}
};
5 处理图片
一般小于8k就会直接转base64，超出就复制文件
5.1 安装包
yarn add url-loader file-loader -D
5.2 配置 webpack.config.js
module.exports = {
mode: 'development',
entry: './src/index',
output: {
filename: 'bundle.js'
},
devtool: 'source-map',
module: {
rules: [
{
test: /.jsx?/i,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react']
}
}
},
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(jpg|png|gif)$/i,
use: {
loader: 'url-loader',
options: {
outputPath: 'images/',
limit: 8 * 1024,
}
}
}
]
}
};
5.3 使用方式
背景和导入文件的方式
5.3.1 直接使用文件的形式
import React from 'react'; import './App.css'; class App extends React.Component { constructor() { super(); this.src = require('./assets/images/i1.jpg'); } render() { return (); } } export { App }'bg'}>'f1'}>hello world
's2'}>hello world
'img'} src={this.src.default}/>
5.3.2 css 方式
.bg{ width: 256px; height: 163px; background: url("assets/images/i1.jpg"); }
6 处理字体
以 iconfont 为例
6.1 安装包
yarn add url-loader file-loader -D
6.2 配置 webpack.config.js
module.exports = {
mode: 'development',
entry: './src/index',
output: {
filename: 'bundle.js'
},
devtool: 'source-map',
module: {
rules: [
{
test: /.jsx?/i,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react']
}
}
},
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(jpg|png|gif)$/i,
use: {
loader: 'url-loader',
options: {
outputPath: 'images/',
limit: 8 * 1024,
}
}
},
{
test : /\.(eot|svg|ttf|woff|woff2)$/i,
use : {
loader: 'url-loader',
options: {
outputPath: 'fonts/',
limit: 8 * 1024,
}
}
}
]
}
};
6.3 使用例子
6.3.1 导入样式
import './assets/fonts/iconfont.css';
6.3.2 添加字体类和对应的图标类名称
<i className='iconfont icon-gift'/>
7 处理 less 文件
7.1 安装包
yarn add less less-loader -D
7.2 配置 webpack.config.js
module.exports = {
mode: 'development',
entry: './src/index',
output: {
filename: 'bundle.js'
},
devtool: 'source-map',
module: {
rules: [
{
test: /.jsx?/i,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react']
}
}
},
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(jpg|png|gif)$/i,
use: {
loader: 'url-loader',
options: {
outputPath: 'images/',
limit: 8 * 1024,
}
}
},
{
test : /\.(eot|svg|ttf|woff|woff2)$/i,
use : {
loader: 'url-loader',
options: {
outputPath: 'fonts/',
limit: 8 * 1024,
}
}
},
{
test : /\.less$/i,
use :[
'style-loader',
'css-loader',
'less-loader'
]
}
]
}
};
8 style 代码检查工具
好坏参半，看情况使用（有不少蛋疼的要求要遵守）
8.1 安装包
yarn add stylelint stylelint-config-standard stylelint-webpack-plugin -D
8.2 配置 package.json
{
"name": "my-webpack",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.7.4",
"@babel/preset-env": "^7.7.4",
"@babel/preset-react": "^7.7.4",
"babel-loader": "^8.0.6",
"css-loader": "^3.2.0",
"file-loader": "^5.0.2",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"style-loader": "^1.0.0",
"stylelint": "^12.0.0",
"stylelint-config-standard": "^19.0.0",
"stylelint-webpack-plugin": "^1.1.0",
"url-loader": "^3.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10"
},
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0"
},
"stylelint": {
"extends": ["stylelint-config-standard"]
}
}
8.3 配置 webpack.config.js
const stylelint = require('stylelint-webpack-plugin'); const stylelint_switch = false; //用作开关 module.exports = { mode: 'development', entry: './src/index', output: { filename: 'bundle.js' }, devtool: 'source-map', plugins: [ ...(stylelint_switch ? new stylelint({ files: [ '**/*.css', '**/*.less', '**/*.html', '**/*.scss' ] }) : []) ], module: { rules: [ { test: /.jsx?/i, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react'] } } }, { test: /\.css$/i, use: [ 'style-loader', 'css-loader' ] }, { test: /\.(jpg|png|gif)$/i, use: { loader: 'url-loader', options: { outputPath: 'images/', limit: 8 * 1024, } } }, { test: /\.(eot|svg|ttf|woff|woff2)$/i, use: { loader: 'url-loader', options: { outputPath: 'fonts/', limit: 8 * 1024, } } }, { test: /\.less$/i, use: [ 'style-loader', 'css-loader', 'less-loader' ] } ] } };
9 兼容旧版本的 css （IE 为例）
9.1 安装包
yarn add postcss-loader autoprefixer -D
9.2 配置 package.json
{
"name": "my-webpack",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.7.4",
"@babel/preset-env": "^7.7.4",
"@babel/preset-react": "^7.7.4",
"autoprefixer": "^9.7.2",
"babel-loader": "^8.0.6",
"css-loader": "^3.2.0",
"file-loader": "^5.0.2",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"postcss-loader": "^3.0.0",
"style-loader": "^1.0.0",
"stylelint": "^12.0.0",
"stylelint-config-standard": "^19.0.0",
"stylelint-webpack-plugin": "^1.1.0",
"url-loader": "^3.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10"
},
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0"
},
"stylelint": {
"extends": [
"stylelint-config-standard"
]
},
"browserslist": [
"> 0.1%",
"last 2 version",
"not dead"
]
}
9.3 配置 webpack.config.js
const stylelint = require('stylelint-webpack-plugin'); const stylelint_switch = false; //用作开关 module.exports = { mode: 'development', entry: './src/index', output: { filename: 'bundle.js' }, devtool: 'source-map', plugins: [ ...(stylelint_switch ? new stylelint({ files: [ '**/*.css', '**/*.less', '**/*.html', '**/*.scss' ] }) : []) ], module: { rules: [ { test: /.jsx?/i, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react'] } } }, { test: /\.css$/i, use: [ 'style-loader', 'css-loader', { loader : 'postcss-loader', options : { plugins: [ require('autoprefixer') ] } } ] }, { test: /\.(jpg|png|gif)$/i, use: { loader: 'url-loader', options: { outputPath: 'images/', limit: 8 * 1024, } } }, { test: /\.(eot|svg|ttf|woff|woff2)$/i, use: { loader: 'url-loader', options: { outputPath: 'fonts/', limit: 8 * 1024, } } }, { test: /\.less$/i, use: [ 'style-loader', 'css-loader', 'less-loader' ] } ] } };
10 js 代码检查工具
10.1 安装包
yarn add eslint eslint-loader eslint-plugin-react -D yarn add eslint-formatter-html-extended -D //用于输出错误提示文件
10.2 配置 eslint
node ./node_modules/eslint/bin/eslint.js --init > To check syntax and find problems > JavaScript modules (import/export) > React Does your project use TypeScript? (y/N) n >(*) Browser > JavaScript ? Would you like to install them now with npm? (Y/n) n
配置之后生成 .eslintrc.js 文件（源代码仅供参考）
module.exports = {
"env": {
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
}
};
10.3 配置 webpack.config.js
包含到处到文件中
const stylelint = require('stylelint-webpack-plugin'); const stylelint_switch = false; //用作开关 const eslint_switch = true; //开关 module.exports = { mode: 'development', entry: './src/index', output: { filename: 'bundle.js' }, devtool: 'source-map', plugins: [ ...(stylelint_switch ? new stylelint({ files: [ '**/*.css', '**/*.less', '**/*.html', '**/*.scss' ] }) : []) ], module: { rules: [ { test: /.jsx?/i, exclude: /node_modules/, use: [ { loader: 'babel-loader', options: { presets: ['@babel/preset-react'] } }, ...(eslint_switch ? [{ loader: 'eslint-loader', options: { outputReport : { filePath: 'eslint_report.html', formatter: require('eslint-formatter-html-extended') } } }] : []) ] }, { test: /\.css$/i, use: [ 'style-loader', 'css-loader', { loader: 'postcss-loader', options: { plugins: [ require('autoprefixer') ] } } ] }, { test: /\.(jpg|png|gif)$/i, use: { loader: 'url-loader', options: { outputPath: 'images/', limit: 8 * 1024, } } }, { test: /\.(eot|svg|ttf|woff|woff2)$/i, use: { loader: 'url-loader', options: { outputPath: 'fonts/', limit: 8 * 1024, } } }, { test: /\.less$/i, use: [ 'style-loader', 'css-loader', 'less-loader' ] } ] } };
10.4 局部禁用的例子（仅供参考，根据提示操作）
/* eslint-disable no-unused-vars */ const a = 0; //之后不适用 /* eslint-enable no-unused-vars */ /* eslint-disable no-undef */ this.src = require('./assets/images/i1.jpg'); /* eslint-enable no-undef */
11 devServer
用于开发，上线就无效了，打包过程中 eslint 如果有错会影响热更新，可能会失效
11.1 安装包
yarn add webpack-dev-server -D
11.2 配置 webpack.config.js
const path = require('path'); const stylelint = require('stylelint-webpack-plugin'); const stylelint_switch = false; //用作开关 const eslint_switch = true; //开关 module.exports = { mode: 'development', entry: './src/index', output: { filename: 'bundle.js' }, devtool: 'source-map', devServer: { port: 8091, compress: true, //推荐压缩, open: true, hot: true, hotOnly: true, contentBase: path.resolve(__dirname, './dist') }, plugins: [ ...(stylelint_switch ? new stylelint({ files: [ '**/*.css', '**/*.less', '**/*.html', '**/*.scss' ] }) : []) ], module: { rules: [ { test: /.jsx?/i, exclude: /node_modules/, use: [ { loader: 'babel-loader', options: { presets: ['@babel/preset-react'] } }, ...(eslint_switch ? [{ loader: 'eslint-loader', options: { outputReport: { filePath: 'eslint_report.html', formatter: require('eslint-formatter-html-extended') } } }] : []) ] }, { test: /\.css$/i, use: [ 'style-loader', 'css-loader', { loader: 'postcss-loader', options: { plugins: [ require('autoprefixer') ] } } ] }, { test: /\.(jpg|png|gif)$/i, use: { loader: 'url-loader', options: { outputPath: 'images/', limit: 8 * 1024, } } }, { test: /\.(eot|svg|ttf|woff|woff2)$/i, use: { loader: 'url-loader', options: { outputPath: 'fonts/', limit: 8 * 1024, } } }, { test: /\.less$/i, use: [ 'style-loader', 'css-loader', 'less-loader' ] } ] } };
12 给 html 自动注入 js，自动清理打包文件夹
12.1 安装包
yarn add clean-webpack-plugin html-webpack-plugin -D
12.2 配置 webpack.config.js
html 中可以去掉引入 js 文件的代码，打包成功够会自动注入的
const path = require('path'); const stylelint = require('stylelint-webpack-plugin'); const stylelint_switch = false; //用作开关 const eslint_switch = true; //开关 module.exports = { mode: 'development', entry: './src/index', output: { filename: 'bundle.js' }, devtool: 'source-map', devServer: { port: 8091, compress: true, //推荐压缩, open: true, hot: true, hotOnly: true, contentBase: path.resolve(__dirname, './dist') }, plugins: [ ...(stylelint_switch ? new stylelint({ files: [ '**/*.css', '**/*.less', '**/*.html', '**/*.scss' ] }) : []), new (require('html-webpack-plugin'))({ template: path.resolve(__dirname, './public/index.html') }), new (require('clean-webpack-plugin'))() ], module: { rules: [ { test: /.jsx?/i, exclude: /node_modules/, use: [ { loader: 'babel-loader', options: { presets: ['@babel/preset-react'] } }, ...(eslint_switch ? [{ loader: 'eslint-loader', options: { outputReport: { filePath: 'eslint_report.html', formatter: require('eslint-formatter-html-extended') } } }] : []) ] }, { test: /\.css$/i, use: [ 'style-loader', 'css-loader', { loader: 'postcss-loader', options: { plugins: [ require('autoprefixer') ] } } ] }, { test: /\.(jpg|png|gif)$/i, use: { loader: 'url-loader', options: { outputPath: 'images/', limit: 8 * 1024, } } }, { test: /\.(eot|svg|ttf|woff|woff2)$/i, use: { loader: 'url-loader', options: { outputPath: 'fonts/', limit: 8 * 1024, } } }, { test: /\.less$/i, use: [ 'style-loader', 'css-loader', 'less-loader' ] } ] } };
13 多配置
用于生产、线上和测试等不同环境
13.1 安装包
用于合并
yarn add webpack-merge -D
13.2 在 package.json 中配置命令
{
"name": "my-webpack",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "npx webpack --config ./config/webpack.dev.js",
"serve": "npx webpack-dev-server --config ./config/webpack.serve.js",
"build": "npx webpack --config ./config/webpack.prod.js"
},
"devDependencies": {
"@babel/core": "^7.7.4",
"@babel/preset-env": "^7.7.4",
"@babel/preset-react": "^7.7.4",
"autoprefixer": "^9.7.2",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.0",
"eslint": "^6.7.1",
"eslint-formatter-html-extended": "^1.0.2",
"eslint-loader": "^3.0.2",
"eslint-plugin-react": "^7.17.0",
"file-loader": "^5.0.2",
"html-webpack-plugin": "^3.2.0",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"postcss-loader": "^3.0.0",
"style-loader": "^1.0.0",
"stylelint": "^12.0.0",
"stylelint-config-standard": "^19.0.0",
"stylelint-webpack-plugin": "^1.1.0",
"url-loader": "^3.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0"
},
"stylelint": {
"extends": [
"stylelint-config-standard"
]
},
"browserslist": [
"> 0.1%",
"last 2 version",
"not dead"
]
}
13.3 配置 webpack 配置文件
创建 config 目录
13.3.1 公共部分
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const {CleanWebpackPlugin} = require('clean-webpack-plugin'); module.exports = { entry: path.resolve(__filename, '../../src/index'), output: { filename: 'bundle.js' }, plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, '../public/index.html') }), new CleanWebpackPlugin() ], module: { rules: [ { test: /.jsx?/i, exclude: /node_modules/, use: [ { loader: 'babel-loader', options: { presets: ['@babel/preset-react'] } }, ] }, { test: /\.css$/i, use: [ 'style-loader', 'css-loader', { loader: 'postcss-loader', options: { plugins: [ require('autoprefixer') ] } } ] }, { test: /\.(jpg|png|gif)$/i, use: { loader: 'url-loader', options: { outputPath: 'images/', limit: 8 * 1024, } } }, { test: /\.(eot|svg|ttf|woff|woff2)$/i, use: { loader: 'url-loader', options: { outputPath: 'fonts/', limit: 8 * 1024, } } }, { test: /\.less$/i, use: [ 'style-loader', 'css-loader', 'less-loader' ] } ] } };
13.3.2 开发环境
const stylelint = require('stylelint-webpack-plugin'); const stylelint_switch = false; //用作开关 const eslint_switch = true; //开关 const base = require('./webpack.base'); const merge = require('webpack-merge'); if (eslint_switch) { base.module.rules.forEach(it => { if (it.test.toString().match(/\.js/)) { it.use.push( { loader: 'eslint-loader', options: { outputReport: { filePath: 'eslint_report.html', formatter: require('eslint-formatter-html-extended') } } } ) } }); } module.exports = merge(base, { mode: 'development', devtool: 'source-map', plugins: [ ...(stylelint_switch ? [new stylelint({ files: [ '**/*.css', '**/*.less', '**/*.html', '**/*.scss' ] })] : []), ] });
13.3.3 开发环境（使用服务器 devServer）
const path = require('path'); const dev = require('./webpack.dev'); const merge = require('webpack-merge'); module.exports = merge(dev, { devServer: { port: 8091, compress: true, //推荐压缩, open: true, hot: true, hotOnly: true, contentBase: path.resolve(__dirname, './dist') }, });
13.3.4 线上环境
const base = require('./webpack.base'); const merge = require('webpack-merge'); module.exports = merge(base, { mode: 'production' });
14 说明
出问题时，一切以最后配置为准（测试可用的），对应版本号需要特别注意，可能需要改动
14.1 整体配置
14.1.1 package.json
{
"name": "my-webpack",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "npx webpack --config ./config/webpack.dev.js",
"serve": "npx webpack-dev-server --config ./config/webpack.serve.js",
"build": "npx webpack --config ./config/webpack.prod.js"
},
"devDependencies": {
"@babel/core": "^7.7.4",
"@babel/preset-env": "^7.7.4",
"@babel/preset-react": "^7.7.4",
"autoprefixer": "^9.7.2",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.0",
"eslint": "^6.7.1",
"eslint-formatter-html-extended": "^1.0.2",
"eslint-loader": "^3.0.2",
"eslint-plugin-react": "^7.17.0",
"file-loader": "^5.0.2",
"html-webpack-plugin": "^3.2.0",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"postcss-loader": "^3.0.0",
"style-loader": "^1.0.0",
"stylelint": "^12.0.0",
"stylelint-config-standard": "^19.0.0",
"stylelint-webpack-plugin": "^1.1.0",
"url-loader": "^3.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0"
},
"stylelint": {
"extends": [
"stylelint-config-standard"
]
},
"browserslist": [
"> 0.1%",
"last 2 version",
"not dead"
]
}
14.1.2 webpack.config.js
const path = require('path'); const stylelint = require('stylelint-webpack-plugin'); const stylelint_switch = false; //用作开关 const eslint_switch = true; //开关 module.exports = { mode: 'development', entry: './src/index', output: { filename: 'bundle.js' }, devtool: 'source-map', devServer: { port: 8091, compress: true, //推荐压缩, open: true, hot: true, hotOnly: true, contentBase: path.resolve(__dirname, './dist') }, plugins: [ ...(stylelint_switch ? [new stylelint({ files: [ '**/*.css', '**/*.less', '**/*.html', '**/*.scss' ] })] : []), new (require('html-webpack-plugin'))({ template: path.resolve(__dirname, './public/index.html') }), new (require('clean-webpack-plugin'))() ], module: { rules: [ { test: /.jsx?/i, exclude: /node_modules/, use: [ { loader: 'babel-loader', options: { presets: ['@babel/preset-react'] } }, ...(eslint_switch ? [{ loader: 'eslint-loader', options: { outputReport: { filePath: 'eslint_report.html', formatter: require('eslint-formatter-html-extended') } } }] : []) ] }, { test: /\.css$/i, use: [ 'style-loader', 'css-loader', { loader: 'postcss-loader', options: { plugins: [ require('autoprefixer') ] } } ] }, { test: /\.(jpg|png|gif)$/i, use: { loader: 'url-loader', options: { outputPath: 'images/', limit: 8 * 1024, } } }, { test: /\.(eot|svg|ttf|woff|woff2)$/i, use: { loader: 'url-loader', options: { outputPath: 'fonts/', limit: 8 * 1024, } } }, { test: /\.less$/i, use: [ 'style-loader', 'css-loader', 'less-loader' ] } ] } };
14.1.3 .eslintrc.js
module.exports = {
"env": {
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
}
};
Created: 2019-11-30 周六 17:31
Validate