1. 我们先新建一个项目 project 并用 npm 命令初始化项目（一路回车）
npm init
2. 安装 webpack 与 webpack-cli ( 4 版本需要cli才能执行命令)
npm install --save-dev webpack webpack-cli
3. 新建 src 文件夹，存放我们要打包的源码，默认输入文件是 index.js,所以我们在 src 下新建一个index.js文件
4. 新建 webpack.config.js，webpack配置都是在这个文件下
5. 在package.json中配置服务和打包命令
这里配置了简单的webpack，注释详细适合入门，话不多说贴上代码：
webpack.config.js
/** webpack.config.js*/
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin") // 自动生成index.html
const { CleanWebpackPlugin } = require("clean-webpack-plugin") // 每次打包清空文件夹
const MiniCssExtractPlugin = require("mini-css-extract-plugin") // css分离
const TerserWebpackPlugin = require("terser-webpack-plugin") // 压缩js(在optimization中配置)
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin") // 压缩css
module.exports = {
context: process.cwd(),
mode: "production", // 开发环境和生产环境配置有很多不同，webpack4以后可以配置mode development/production 用于提供模式配置选项告诉webpack相应地使用其内置的优化
devtool: "eval", // eval会有sourcemap
// entry: "./src/index.js", // 入口文件 如果是一个文件就是单入口 多入口要变成对象 输出文件filename不能写单个
entry: {
index: "./src/index.js",
login: "./src/login.js"
},
output: { // 输出文件
path: path.resolve(__dirname, "dist"), // 输出目录只能是绝对目录
filename: "[name].[hash].js", // 输出文件名(bundle.js,如果是单入口，输出的文件名就是main) 防止缓存有三种hash: hash chunkHash contentHash [hash:8](只要八位)
publicPath: "/" // 根路径,指定的是构建后在html里的路径(即在浏览器中的访问路径)
},
devServer: { // 安装webpack-dev-server –D (其实是express开发服务器) package.json可以配置--open 运行时自动打开页面
contentBase: path.resolve(__dirname, "dist"), // 配置开发服务器运行时的根路径(产出文件的根目录)
port: 8082, // 监听的端口
host: "localhost", // 开发服务器监听的主机地址
compress: true // 开发服务器是否启动gzip等压缩
},
module: {
rules: [
{
test: /\.css/,
// use: ["style-loader", "css-loader"] // loader三种写法: use/loader/use+loader; 从右到左处理css文件
use: [{loader: MiniCssExtractPlugin.loader}, "css-loader"] // css分离
},
{
test: /\.(jpg|jpeg|png|gif|svg)$/,
// use: ["file-loader"] // url-loader比file-loader 功能强(url-loader内置了file-loader)
use: {
loader: "url-loader",
options: {
limit: 10 * 1024, // 如果图片大小小于10k，就转为base64编码
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({ // 产出html文件,编译时候会读取模板文件
template: "./src/index.html", // 指定模板文件
filename: "index.html", // 产出后的文件名
hash: true, // 为了避免缓存，可以在产出的资源后面添加hash值
chunks: ["login", "index"], // 对应入口文件 如果配置了chunksSorteMode,就可以根据代码逻辑进行排序，引入的先后顺序
chunksSortMode:'manual' // 对引入代码块进行排序的模式chunksSortMode: 默认auto manual手动 dependency依赖项 Funtion
}),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: "[name].css", // 代码块名字
chunkFilename: "[id].css" // 异步加载用
})
],
optimization: { // 放优化的内容(这里的压缩mode必须是production才会生效)
minimizer: [ // 放优化的插件
new TerserWebpackPlugin({ // 压缩js
parallel: true, // 开启多进程压缩
cache: true // 开启缓存(压缩过的不压缩)
}),
new OptimizeCssAssetsWebpackPlugin({ // 压缩css
assetNameRegExp: /\.css$/g,
// cssProcessor: require("cssnao")
})
]
},
}
package.json
{
"name": "1.webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.0",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"style-loader": "^1.0.0",
"terser-webpack-plugin": "^2.0.0",
"url-loader": "^2.1.0",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^3.8.0"
}
}
网友评论