本文详细记录了使用webpack从创建项目目录到配置打包过程，包括npm初始化、安装webpack及插件、配置webpack.config.js、处理不同类型的文件（如js、html、css、scss和静态资源），以及使用热加载、清理旧包、处理html引用图片等问题。通过这些步骤，实现了愉快地编写和管理代码。
记录一下自己使用webpack管理代码
webpack搭建项目的过程比较复杂，甚至插件版本问题还会引发一些未知的问题，但是搭建完成，对于书写代码真的是很棒！
进入正题：
1.首先创建一个项目目录文件夹，我给他命名为my-webpack，npm init初始化一个package.json，然后npm i将依赖下下来，这里我新建了一个src目录，在里面书写业务代码；
2.webpack工具要下下来webpack -D 、webpack-cli -D，这里以及后面所有下载的插件loader之类的都是-d，意思是运用到开发环境，然后在项目根目录下新建一个webpack.config.js，这里面是配置打包相关的一些配置：
module.exports = {
entry: __dirname + "/src/js/main.js",
output: {
path: __dirname + "/dist", //打包后的文件存放的地方
filename: "js/chunk.[hash:8].js", //打包后输出文件的文件名
}
}
这里我是把入口文件main.js放在src/js文件夹下，main.js:
这里可以使用一个热加载插件：‘webpack-dev-server’，每次保存就会刷新
//配置webpack开发服务功能
devServer: {
contentBase: "./src", //本地服务器所加载的页面所在的目录
host: "localhost",
inline: true, //实时刷新
compress: true,
port: 8080,
}
为了跟vue脚手架类似，我把package.json里面修改成了这样：
"scripts": {
"dev": "webpack-dev-server",
"build": "webpack --mode production --progress --display-modules --colors --display-reasons",
"test": "echo \"Error: no test specified\" && exit 1"
},
运行一下代码：
3.一些插件使用：打包时无法先删除原来的包，所以需要一个‘clean-webpack-plugin’插件，webpack本身无法打包html和css，也可以借助插件解决，分别是：‘html-webpack-plugin’、‘extract-text-webpack-plugin’
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "index.html",
minify: {
// 压缩操作
removeComments: true, // 移除HTML中的注释
collapseWhitespace: true, // 删除空白符与换行符
minifyCSS: true, // 压缩内联css
removeAttributeQuotes: true, // 删除模板中的双引号
collapseWhitespace: true, // 将模板压缩成一行
},
hash: true,
}),
new CleanWebpackPlugin(),
new ExtractTextPlugin({
filename: "css/[name].[hash:8].css",
// publicPath: "../",
allChunks: true,
})
]
4.由于还要使用scss和一些静态资源，所以就可以配置一些loader来处理他们url-loader处理图片，样式表用style-loader、css-loader、sass-loader
{
test: /\.(jpg|png|gif|bmp|jpeg)$/,
use: {
loader: "url-loader",
options: {
esModule: false,
name: "img/[hash:8].[name].[ext]",
limit: 1000 * 10, //单位字节 超过10k不处理
publicPath: "../",
// publicPath: "/dist/",
},
},
}, // 配置图片路径loader
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
//css的提取
fallback: "style-loader",
use: ["css-loader"],
}),
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
//css的提取
fallback: "style-loader",
use: ["css-loader", "sass-loader"],
}),
},
这样就发现一个问题，在样式表中引用的图片资源会被处理，可是html中资源，如：img的src中引入图片就不会被打包处理，所以这里需要用到一个‘html-withimg-loader’，配置方法如下：
{
test: /\.html$/,
use: {
loader: "html-withimg-loader",
options: {
attrs: ["img:src", "img:data-src", "audio:src"],
minimize: true,
},
},
}
当我们需要书写es6语法，并且希望能够在打包时自动编译成es5，就可以用babel， “babel-core”、 “babel-loader”、“babel-preset-env”（转码规则）
webpack.config.js:
{
test: /\.html$/,
use: {
loader: "html-withimg-loader",
options: {
attrs: ["img:src", "img:data-src", "audio:src"],
minimize: true,
},
},
}
这样终于可以愉快的写代码了
5.如果想将一些文件不经过打包复制到dist文件夹下，可以使用‘copy-webpack-plugin’
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, "./src/js/"),
to: path.resolve(__dirname, "./dist/js/"),
flatten: true,
globOptions: {
ignore: ["**/src/js/main.js"],
},
},
],
})
这样做的好处可以避免有一些js不经过打包，通过script引入，减小打包的js体积，比如jquery这种公共的js。这样差不多就完成了。
const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //html模板解析插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); //打包清除文件夹
const ExtractTextPlugin = require("extract-text-webpack-plugin"); //css打包插件
const CopyWebpackPlugin = require("copy-webpack-plugin"); //拷贝插件
module.exports = {
entry: __dirname + "/src/js/main.js",
output: {
path: __dirname + "/dist", //打包后的文件存放的地方
filename: "js/chunk.[hash:8].js", //打包后输出文件的文件名
},
// externals: {
// jquery: "jQuery",
// },
//配置webpack开发服务功能
devServer: {
contentBase: "./src", //本地服务器所加载的页面所在的目录
host: "localhost",
inline: true, //实时刷新
compress: true,
port: 8080,
}, // 配置webpack服务
module: {
// 规则
rules: [
{
test: /\.(jpg|png|gif|bmp|jpeg)$/,
use: {
loader: "url-loader",
options: {
esModule: false,
name: "img/[hash:8].[name].[ext]",
limit: 1000 * 10, //单位字节 超过10k不处理
publicPath: "../",
// publicPath: "/dist/",
},
},
}, // 配置图片路径loader
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
//css的提取
fallback: "style-loader",
use: ["css-loader"],
}),
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
//css的提取
fallback: "style-loader",
use: ["css-loader", "sass-loader"],
}),
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/, //排除掉node_module目录
use: {
loader: "babel-loader",
options: {
presets: ["env"], //转码规则
},
},
},
{
test: /\.html$/,
use: {
loader: "html-withimg-loader",
options: {
attrs: ["img:src", "img:data-src", "audio:src"],
minimize: true,
},
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "index.html",
minify: {
// 压缩操作
removeComments: true, // 移除HTML中的注释
collapseWhitespace: true, // 删除空白符与换行符
minifyCSS: true, // 压缩内联css
removeAttributeQuotes: true, // 删除模板中的双引号
collapseWhitespace: true, // 将模板压缩成一行
},
hash: true,
}),
new CleanWebpackPlugin(),
new ExtractTextPlugin({
filename: "css/[name].[hash:8].css",
// publicPath: "../",
allChunks: true,
}),
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, "./src/js/"),
to: path.resolve(__dirname, "./dist/js/"),
flatten: true,
globOptions: {
ignore: ["**/src/js/main.js"],
},
},
],
}),
],
};
main.js:
let a = "my-webpack";
console.log(a)
// const $ = require('./jquery.min')
// console.log($)
import "../css/index.scss";
import Util from "./Util";
console.log(a, Util.getNowTimes());
const app = document.getElementById("app");
const container = document.getElementsByClassName("container")[0];
const button = document.getElementById("change");
const url = require("../img/3.png");
container.innerHTML = Util.getNowTimes();
button.addEventListener("click", function () {
console.log("改变", this.previousElementSibling);
this.previousElementSibling.setAttribute("src", url);
});
function foo(strings, ...values) {
console.log(strings);
console.log(values);
var str = "";
strings.map(
(item, i) =>
(str +=
!item && i === 0
? values[i] + new Date().getFullYear()
: i <= values.length - 1
? item + values[i]
: item)
);
return str;
}
const name = "年轻人";
const subject = "webpack";
$("#title").click(function (e) {
$(this).html(foo`${name}的${subject}实践`);
});
最终的目录
扫一扫
614
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
