什么是webpack？
- 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
环境
开始
- 首先新建一个文件夹demo
- 进入demo文件夹下，使用
npm init命令初始化一个package.json文件
- 如果你觉得
npm的下载速率太慢的话，可以使用以下命令修改源为淘宝镜像
npm config set registry https://registry.npm.taobao.org
// 文件目录
- app // 文件夹
-main.js
-index.css
- index.html
...
// main.js
import React from 'react';
import ReactDOM from 'react-dom';
import styles from './index.css';
class App extends React.Component {
render() {
return (
<div>
<h1 className={styles.h1}>Hello World</h1>
<h2>Hello Webpack</h2>
<s>delete</s>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'));
// index.css
.h1 {
color: orange;
}
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
正式开始使用webpack
- 首先全局下载
webpack、webpack-cli和webpack-dev-server
npm i -g webpack webpack-dev-server webpack-cli
npm i --save-dev webpack webpack-dev-server
npm i --save react react-dom
- 我们这时候需要在根目录下新建一个
webpack.config.js文件，用来配置webpack
// webpack.config.js
module.exports = {
entry: '/app/main.js',
output: {
filename: 'bundle.js'
}
}
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open",
"build": "webpack -p"
},
- 然后只需要使用
npm run build命令就可以快速打包生成一个bundle.js文件
- 这时我们配置其他项
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: '/app/main.js',
output: {
filename: 'bundle.js'
},
plugins: [
new UglifyJsPlugin() // 压缩混淆输出的 js 代码
],
module: {
rules: [ // 规则
{
test: /\.js[x]?$/,
exclude: /node_modules/, // 匹配的范围包括node_modules里的文件
use: {
loader: 'babel-loader', // 使用babel-loader将ES6/jsx语法转化为ES5语法
options: {
presets: ['es2015', 'react']
// 使用 Babel 的预设插件 babel-preset-es2015 and babel-preset-react 来转义 ES6 和 React。
}
}
},
{
test: /\.css$/, // 匹配到.css后缀的文件名
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
// 开启 CSS Module 功能
options: {
modules: true
}
}
]
}
]
},
resolve: {
extensions: ['.js', '.css', '.jsx', '.scss', '.less']
}
};
-
npm run build可能会报如下错误:
cdCannot find module '@babel/core' babel-loader@8 requires Babel 7.x,如果按我上面步骤我们装的babel-loader是8.0.4版本，因为我们只需要重新装7版本。
npm install babel-loader@7 --save-dev
- 同时在根目录下新建一个
.eslintrc.js文件，下面是一个通用的eslint配置。
// .eslintrc.js
module.exports = {
parser: 'babel-eslint',
extends: ['airbnb', 'prettier'],
env: {
browser: true,
node: true,
es6: true,
mocha: true,
jest: true,
jasmine: true,
},
rules: {
indent: ['error', 4],
'generator-star-spacing': [0],
'consistent-return': [0],
'react/forbid-prop-types': [0],
'react/jsx-filename-extension': [1, { extensions: ['.js'] }],
'global-require': [1],
'import/prefer-default-export': [0],
'react/jsx-no-bind': [0],
'react/prop-types': [0],
"react/jsx-indent": [4, "space"],
'react/prefer-stateless-function': [0],
'react/jsx-one-expression-per-line': [0],
'react/jsx-wrap-multilines': [
'error',
{
declaration: 'parens-new-line',
assignment: 'parens-new-line',
return: 'parens-new-line',
arrow: 'parens-new-line',
condition: 'parens-new-line',
logical: 'parens-new-line',
prop: 'ignore',
},
],
'no-else-return': [0],
'no-restricted-syntax': [0],
'import/no-extraneous-dependencies': [0],
'no-use-before-define': [0],
'jsx-a11y/no-static-element-interactions': [0],
'jsx-a11y/no-noninteractive-element-interactions': [0],
'jsx-a11y/click-events-have-key-events': [0],
'jsx-a11y/anchor-is-valid': [0],
'no-nested-ternary': [0],
'arrow-body-style': [0],
'import/extensions': [0],
'no-bitwise': [0],
'no-cond-assign': [0],
'import/no-unresolved': [0],
'comma-dangle': [
'error',
{
arrays: 'always-multiline',
objects: 'always-multiline',
imports: 'always-multiline',
exports: 'always-multiline',
functions: 'ignore',
},
],
'object-curly-newline': [0],
'function-paren-newline': [0],
'no-restricted-globals': [0],
'require-yield': [1],
},
parserOptions: {
ecmaFeatures: {
experimentalObjectRestSpread: true,
},
},
settings: {
polyfills: ['fetch', 'promises'],
},
};
- 虽然配置了eslint，但是他会校验所有的文件，但我们总有一些文件不想要被校验，我们可以在根目录新建一个
.eslintignore文件
// .eslintignore 配置
/dist // 忽略打包生成的文件
/node_modules // 忽略依赖的包
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "cross-env DEBUG=false webpack-dev-server --open",
"dev": "webpack-dev-server --open",
"build": "webpack -p"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^2.1.1",
"eslint": "^5.15.3",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^4.1.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.2",
"eslint-plugin-babel": "^5.1.0",
"eslint-plugin-compat": "^2.1.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-markdown": "^1.0.0-beta.6",
"eslint-plugin-react": "^7.0.1",
"style-loader": "^0.23.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"uglifyjs-webpack-plugin": "^2.1.2",
"webpack-dev-server": "^3.2.1"
},
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
}
}
- 你需要将其中的依赖使用
npm install --save-dev一个个下载下来，或者将package.json文件的内容复制过去，然后直接使用npm i就可以直接下载
总结
- 你可以使用
npm run dev命令启动demo项目，他会在浏览器自动打开localhost:8080，在你修改代码时，浏览器会自动刷新你修改的部分，同时编辑器会校验eslint规范。
- demo源码地址 demo
网友评论