无webpack.config.js配置打包
1、快速构建package.json文件。
npm init -y
复制代码2、安装webpack4及其命令行接口
npm i webpack webpack-cli --save-dev （webpack4 需要务必装 webpack-cli）复制代码3、
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
1、安装对应依赖包
npm i babel-core babel-loader babel-preset-env babel-preset-react --save-devnpm 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看下效果
