1. 安装 installation
进入项目目录, 初始化 package.json 并以项目开发依赖来安装 webpack 及 cli.
- npm init -y
- npm i webpack --save-dev
- npm i webpack-cli --save-dev
2. 添加 NPM Script 命令
于 package.json 的 script 中, 添加执行命令. 执行命令 npm run build 即可进行 bundle .
- script:{
- "build":"webpack"
- }
3. 新特性一: 默认的出入口
默认入口 entry:./src/index.js
默认出口 output: ./dist/main.js
4. 新特性二: 开发模式和生产模式
development mode or production mode 在 NPM Script 的直接定义即可.
- "scripts": {
- "dev": "webpack --mode development",
- "build": "webpack --mode production"
- }
Production mode: 应用了许多开箱即用的优化项, 如, 代码压缩, tree-shaking 等等.
Development mode: 对速度进行了优化且仅提供了一个非压缩的 bundle .
5. 如何覆写默认的出入口?
- "scripts": {
- "dev": "webpack --mode development ./foo/src/js/index.js --output ./foo/main.js",
- "build": "webpack --mode production ./foo/src/js/index.js --output ./foo/main.js"
- }
6. 使用 Babel 编译 ES6
1.Babel-loader 是用于将 ES6 编译成 ES5 的 webpack loader, 为了使用该 loader 需要安装其依赖项:
- 1.1.babel-core
- 1.2.babel-loader
- 1.3.babel-preset-env
- npm i babel-core babel-loader babel-preset-env --save-dev
2. 在项目目录下新建 .babelrc 文件并写入一下内容:
- {
- "presets": [
- "env"
- ]
- }
3. 两种方法以配置 babel-loader
3.1 使用 webpack 配置文件
3.2 使用 --module-bind NPM Script
3.1 为何还需要用到 webpack 配置文件?
webpack 零配置概念目前仅限于前面所说的两个新特性, 使用 loaders 仍然需要配置文件.
项目目录下新建 webpack.config.js 文件并写入一下内容:
- module.exports = {
- module: {
- rules: [
- {
- test: /\.js$/,
- exclude: /node_modules/,
- use: {
- loader: "babel-loader"
- }
- }
- ]
- }
- };
无需指定入口, 除非你要自定义入口.
接下来你就可以在入口文件中尝试使用 ES6 , 然后 npm run build 即可在 ./dist/main.js 中看到编译生成的 ES5 代码.
3.2 通过 --module-bind 无配置文件使用 babel-loader
- "scripts": {
- "dev": "webpack --mode development --module-bind js=babel-loader",
- "build": "webpack --mode production --module-bind js=babel-loader"
- }
这种方法很明显会使得 scripts 很臃肿, 推荐使用第一种方法.
7.Webpack 4 与 React 配合使用
7.1 得先安装和配置好 Babel, 即如第三点提到的.
7.2 安装 React 核心库及依赖
- npm i react react-dom --save-dev
- npm i babel-preset-react --save-dev
修改 .babelrc 文件:
- { "presets": ["env", "react"]
- }
在 webpack.config.js 配置 babel-loader 以读取 .jsx 文件:
- module.exports = {
- module: {
- rules: [
- {
- test: /\.(js|jsx)$/,
- exclude: /node_modules/,
- use: {
- loader: "babel-loader"
- }
- }
- ]
- }
- };
测试使用:
新建 ./src/App.js :
- import React from "react";
- import ReactDOM from "react-dom";
- const App = () => {
- return (
- <div>
- <p>React here!</p>
- </div>
- );
- };
- export default App;
- ReactDOM.render(<App />, document.getElementById("app"));
在 ./src/index.js import App.js 后 npm run build 即可.
8.html webpack Plugin
需要两个常用的 plugin 来处理 HTML 文件:
- html-webpack-plugin
- html-loader
安装并使用 plugins
- npm i html-webpack-plugin html-loader --save-dev
- webpack.config.js:
- const HtmlWebPackPlugin = require("html-webpack-plugin");
- module.exports = {
- module: {
- rules: [
- {
- test: /\.js$/,
- exclude: /node_modules/,
- use: {
- loader: "babel-loader"
- }
- },
- {
- test: /\.html$/,
- use: [
- {
- loader: "html-loader",
- options: { minimize: true }
- }
- ]
- }
- ]
- },
- plugins: [
- new HtmlWebPackPlugin({
- template: "./src/index.html",
- filename: "./index.html"
- })
- ]
- };
新建 ./src/index.html ,
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>webpack 4 quickstart</title>
- </head>
- <body>
- <div id="app">
- </div>
- </body>
- </html>
执行 npm run build,./dist 下会输出 HTML 文件, 该文件自动注入了需要的 JavaScript 脚本.
9. 将 CSS 提取为文件
过去使用 extract-text-webpack-plugin (Webpack 4 中无法使用) 来完成这个工作, 但其存在一些不足, 所以在 Webpack 4 中使用 mini-css-extract-plugin (使用该 plugin 的前提是更新 Webpack 至 4.2.0 , 否则无效) 来代替.
9.1 安装
npm i mini-css-extract-plugin css-loader --save-dev
新建 css 文件, ./src/main.css
- body {
- line-height: 2;
- }
配置使用 plugin
- const HtmlWebPackPlugin = require("html-webpack-plugin");
- const MiniCssExtractPlugin = require("mini-css-extract-plugin");
- module.exports = {
- module: {
- rules: [
- {
- test: /\.js$/,
- exclude: /node_modules/,
- use: {
- loader: "babel-loader"
- }
- },
- {
- test: /\.html$/,
- use: [
- {
- loader: "html-loader",
- options: { minimize: true }
- }
- ]
- },
- {
- test: /\.css$/,
- use: [MiniCssExtractPlugin.loader, "css-loader"]
- }
- ]
- },
- plugins: [
- new HtmlWebPackPlugin({
- template: "./src/index.html",
- filename: "./index.html"
- }),
- new MiniCssExtractPlugin({
- filename: "[name].css",
- chunkFilename: "[id].css"
- })
- ]
- };
在入口./src/index.js 中 import CSS file
import style from "./main.css";
npm run build 查看 ./dist .
10.Webpack dev server
10.1 安装 webpack-dev-server
npm i webpack-dev-server --save-dev
10.2 修改 NPM Script
- "scripts": {
- "start": "webpack-dev-server --mode development --open",
- "build": "webpack --mode production"
- }
10.3 npm run start 即可
来源: http://www.qdfuns.com/article/33426/987882d071cc4145a8d6181a7f8978e5.html