无webpack.config.js配置打包
1、快速构建package.json
文件。
npm init -y
复制代码
2、安装webpack4及其命令行接口
npm i webpack webpack-cli --save-dev (webpack4 需要务必装 webpack-cli)复制代码
package.json
文件增加build参数"scripts": {
"build": "webpack"
}复制代码
4、创建./src/index.js
文件
增加内容
console.log(`这是入口文件`);复制代码
5、终端执行npm run build
./dist/main.js
。这个文件是
webpack
对./src/index.js
的打包结果。production和development模式
1、修改package.json
文件的scripts
字段
"scripts": {
"dev": "webpack --mode development",
"prod": "webpack --mode production"
}复制代码
2、分别执行npm run dev
或npm run prod
- 你会看到
./dist/main.js
不同的变化。
production
模式下,默认对打包的进行minification(文件压缩),Tree Shaking(只导入有用代码),scope hoisting(作用域提升)等等操作。
总之是让打包文件更小。
development
模式下,对打包文件不压缩,同时打包速度更快。
如果没指定任何模式,默认是production
模式。
ES6和React
npm i babel-core babel-loader babel-preset-env babel-preset-react --save-dev
npm install --save react react-dom复制代码
2、新建.babelrc
文件,进行相关配置
{
"presets": ["env", "react"]
}
复制代码
3、新建webpack.config.js
文件,进行相关配置
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};复制代码
4、新增./src/app.js
以及修改./src/index.js
./src/app.js
内容如下:
import React from "react";
import ReactDOM from "react-dom";
const App = () => {
return (
<div>
<p>Hello webpack4</p>
</div>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById("app"));复制代码
./src/index.js
内容如下:
import App from "./App";复制代码
5、终端执行npm run prod
使用html-webpack-plugin插件对html进行打包
新建./src/index.html
文件,内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>QWK</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 prod
命令。
你会看到项目多了个./dist/index.html
文件
使用webpack-dev-server插件
安装依赖包npm i webpack-dev-server --save-dev
修改package.json
文件
"scripts": {
"start": "webpack-dev-server --mode development --open",
"prod": "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
看下效果