前提
- 已安裝node(版本號>4.0，已自帶NPM)
- mac機器
- 有一個空目錄
無webpack.config.js配置打包
-
快速構建
package.json文件。
npm init -y -
安裝webpack4及其命令行接口
npm i webpack webpack-cli --save-dev -
package.json文件增加build參數
"scripts": {
"build": "webpack"
}
- 創建
./src/index.js文件
增加內容
console.log(`這是入口文件`);
- 終端執行
npm run build
目錄下多了一個./dist/main.js。
這個文件是webpack對./src/index.js的打包結果。
production和development模式
- 修改
package.json文件的scripts字段
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
- 分別執行
npm run dev或npm run build
你會看到./dist/main.js不同的變化。
production模式下，默認對打包的進行minification(文件壓縮)，Tree Shaking(只導入有用代碼)，scope hoisting（作用域提升）等等操作。
總之是讓打包文件更小。
development模式下，對打包文件不壓縮，同時打包速度更快。
如果沒指定任何模式，默認是production模式。
ES6和React
-
安裝對應依賴包
npm i babel-core babel-loader babel-preset-env react react-dom babel-preset-react --save-dev -
新建
.babelrc文件，進行相關配置
{
"presets": ["env", "react"]
}
- 新建
webpack.config.js文件，進行相關配置
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
- 新增
./src/app.js以及修改./src/index.js
./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 from "./App";
- 終端執行
npm run build
使用html-webpack-plugin插件對html進行打包
新建./src/index.html文件，內容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webpack4入門</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
安裝依賴包。
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"
})
]
};
終端執行npm run build命令。
你會看到項目多了個./dist/index.html文件。
使用webpack-dev-server插件
安裝依賴包。
npm i webpack-dev-server --save-dev
修改package.json文件。
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
}
修改webpack.config.js文件，新增devServer配置。
devServer: {
contentBase: require('path').join(__dirname, "dist"),
compress: true,
port: 8033,
host: "127.0.0.1",
}
終端執行npm run start便可以啟動webpack dev server。
使用Hot Module Replacement
Hot Module Replacement有針對React，Vue，Redux，Angular，樣式等等。
這里我們以React Hot Loader為例。
安裝依賴包。
npm i react-hot-loader --save-dev
修改.babelrc文件，新增plugins選項。
{
"plugins": ["react-hot-loader/babel"]
}
修改webpack.config.js文件。
const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const webpack = require('webpack'); // 新增
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
}
]
},
devtool: 'inline-source-map',
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new webpack.NamedModulesPlugin(), // 新增
new webpack.HotModuleReplacementPlugin() //新增
],
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 8033,
host: "127.0.0.1",
hot: true // 新增
}
};
修改./src/app.js文件內容如下：
import React from "react";
import ReactDOM from "react-dom";
import { hot } from 'react-hot-loader' // 新增
const App = () => {
return (
<div>
<p>這是一個測試文件！真得是動態更新啊</p>
<div>好棒棒啊</div>
</div>
);
};
export default hot(module)(App); // 修改
ReactDOM.render(<App />, document.getElementById("app"));
終端執行npm run start便可以啟動webpack dev server。
然后修改./src/app.js看下效果。