时间：2023-06-10 05:57:02 | 来源：网站运营
时间：2023-06-10 05:57:02 来源：网站运营
webpack打包详解：
在线咨询
yarn webpackconst path = require("path")module.exports = { entry: "./src/index.js", // 指定打包的路径 output: { // 输出文件设置 filename: "bundle.js", // 文件名 path: path.join(__dirname, 'output') // 一定要是绝对路径 }}module.exports = { entry: "./src/index.js", // 指定打包的路径 output: { // 输出文件设置 filename: "bundle.js", // 文件名 path: path.join(__dirname, 'output') // 绝对路径 }, mode: "development" // 设置相关的执行模式}const path = require("path")module.exports = { entry: "./src/main.css", // 指定打包的路径 output: { // 输出文件设置 filename: "bundle.js", // 文件名 path: path.join(__dirname, 'output') // 绝对路径 }, mode: "none", // 设置相关的执行模式 module: { rules: [ // 针对其他资源的配置 { test: /.css$/, // 匹配打包的文件路径 use: ["style-loader","css-loader" ] // 指定匹配到的文件需要执行的loader } ] }}// main.jsimport creating from './header.js'import './main.css'const heading = creating()document.body.append(heading)// heading.jsimport "./heading.css"export default () => { const ele = document.createElement('h2') ele.textContent = "hello world" ele.classList.add("heading") ele.addEventListener("click", () => { alert("hello wepack") }) return ele}const path = require("path")module.exports = { entry: "./src/index.js", // 指定打包的路径 output: { // 输出文件设置 filename: "bundle.js", // 文件名 path: path.join(__dirname, 'output'), // 绝对路径 publicPath: "output/" // 加载的路径 / 不能省略 }, mode: "none", // 设置相关的执行模式 module: { rules: [ // 针对其他资源的配置 { test: /.css$/, // 匹配打包的文件路径 use: ["style-loader","css-loader" ] // 指定匹配到的文件需要执行的loader }, { test: /.png$/, use: "file-loader" } ] }}{ test: /.png$/, use: { loader: "url-loader", options: { limit: 10 * 1024, esModule: false // 新版本file-loader的esModule属性默认是true } } }{ test: /.js$/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env"] } } }@import url(./heading.css); /* 加载资源样式 */body { color: greenyellow; background-image: url(./icon.png); /* 先进行css-loader 发现其他格式的就交给其他格式的loader转化 */ background-size: cover;}html加载资源，比如image标签的src，不过需要先配置html-loader{ test: /.html$/, use: { loader: 'html-loader', // 默认只会处理image标签的src属性 options: { atts: ['img:src', 'a:href'] // 手动设置加载的标签和标签属性，需要html-loader是0.5.5版本 } }}const marked = require("marked")module.exports = sourse => { const html = marked(sourse) // return `export default (${JSON.stringify(html)})` // 直接返回输出的字符串， // 还可以 返回 html 字符串，交给下一个loader操作 return html}const { CleanWebpackPlugin } = require("clean-webpack-plugin") // 导入插件module.exports = { plugins: [ // 配置插件的位置 new CleanWebpackPlugin() // 创建实例并且放到plugins数组中 ]}// plugins 数组中的设置new HtmlWebpackPlugin({ title: "webpack plugin sample", // 设置html文件的title主体 meta: { viewport: "width=device-width" // 视口宽度 }, template: "./src/index.html" // 参照的模板 })./src/index.html<h1><%= htmlWebpackPlugin.options.title %></h1>new HtmlWebpackPlugin({ filename: "about.html" })new copyWebpackPlugin({ // 实例 copy插件 设置对象 patterns: [ // 设置地址 "public" // 指定的文件目录 ] })class myPlugin { apply (compliter) { console.log("启动"); compliter.hooks.emit.tap("mypl", compilation => { // 注册函数，emit是输出文件前的事件挂载点 // compilitation 可以理解为此次打包的上下文，打包产生的过程中产生的结果都在这个数据中 for (const name in compilation.assets) { // console.log(name); // 获取文件名 // console.log(compilation.assets[name].source()); // 获取文件内容 if (name.endsWith(".js")) { const contents = compilation.assets[name].source() const withComment = contents.replace(////*/*+///g, "") compilation.assets[name] = { source: () => withComment, // source 是将来要操作的数据 size: () => withComment.length // size 是必需的 } } } }) }}yarn webpack --watchyarn webpack-dev-server --openmodule.exports = { devServer: { contentBase: ["public"] // 配置静态路径，可以是数组、字符串 } }devServer: { contentBase: ["public"], // 配置静态路径，可以是数组、字符串 proxy: { // 用于配置代理的配置 "/api": { // 代理的请求路径前缀 // http://localhost:8080/api/user 相对于 https://api.github.com/api/user， 所有需要重写 target: "https://api.github.com", // 代理的目标 pathRewrite: { // 代理路径的重写 // http://localhost:8080/api/user 相对于 https://api.github.com/user "^/api": "" // 将代理到的路径中以 /api 开头的路由替换为空 }, // 默认为 false 不能使用 localhost:8080 作为请求 gitHub 主机名 changeOrigin: true // true 会以实际代理的主机名进行请求 } } }devtool: "source-map" // 开发中配置的辅助工具devtool: "eval"const HtmlWebpackPlugin = require("html-webpack-plugin")const allModes = [ 'eval', 'cheap-eval-source-map', 'cheap-module-eval-source-map', 'eval-source-map', 'cheap-source-map', 'cheap-module-source-map', 'inline-cheap-source-map', 'inline-cheap-module-source-map', 'source-map', 'inline-source-map', 'hidden-source-map', 'nosources-source-map']module.exports = allModes.map(item => { return { mode: "none", devtool: item, entry: "./src/index.js", output: { filename: `js/${item}.js` }, module: { rules: [ { test: //.js$/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env"] } } } ] }, plugins: [ new HtmlWebpackPlugin({ filename: `${item}.html` }) ] }})const webpack = require("webpack")module.exports = { …… devServer: { hot: true // 开启热加载 }， plugins: [ new webpack.HotModuleReplacementPlugin() // 模块热加载插件 ]}let lastHeader = heading // 获取旧元素module.hot.accept("./header.js", () => { const value = lastHeader.innerHTML // 获取状态 document.body.remove(lastHeader) const newHeading = creating() newHeading.innerHTML = value // 将状态赋值给新的元素 document.body.append(newHeading) lastHeader = newHeading})import icon from "./icon.png"module.hot.accept("./icon.png", () => { img.src = icon console.log(icon);})// hot: true,hotOnly: true,module.exports = (env, argv) => { // 环境名,运行过程中的所有参数 const config = { entry: "./src/index.js", // 指定打包的路径 output: { // 输出文件设置 filename: "js/bundle.js", // 文件名 path: path.join(__dirname, 'dist'), // 绝对路径 // publicPath: "dist/" // 加载的路径 / 不能省略 }, mode: "development", // 设置相关的执行模式 devtool: "eval", // 开发中配置的辅助工具 devServer: { hot: true, // hotOnly: true, contentBase: ["public"], // 配置静态路径，可以是数组、字符串 }, module: { rules: [ // 针对其他资源的配置 { test: //.css$/, use: ["style-loader", "css-loader"] }, { test: //.png/, use: { loader: "url-loader", options: { limit: 10 * 1024, esModule: false } } }, { test: //.js$/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env"] } } } ] }, plugins: [ // 配置插件的位置 new HtmlWebpackPlugin({ title: "webpack plugin sample", // 设置html文件的title主体 meta: { viewport: "width=device-width" // 视口宽度 }, template: "./src/index.html" // 参照的模板 }), new webpack.HotModuleReplacementPlugin() ] } // 开发模式 if (env === "production") { config.mode = "production" config.devtool = false config.plugins = [ new CleanWebpackPlugin(), new CopyWebpackPlugin(['public']), ...config.plugins ] } return config}// webpack.prod.jsconst common = require("./webpack.common")const { merge } = require("webpack-merge")const { CleanWebpackPlugin } = require("clean-webpack-plugin")const CopyWebpackPlugin = require("copy-webpack-plugin");module.exports = merge(common, { // merge 类似于 assign（），但是merge可以用于重新改变值，并且是新的空间 mode: 'production', plugins: [ new CleanWebpackPlugin(), new CopyWebpackPlugin({ // 实例 copy插件 设置对象 patterns: [ // 设置地址 "public" // 指定的文件目录 ] }) ]})const webpack = require("webpack")module.exports = { entry: "./src/main.js", output: { filename: "main.js", }, mode: "none", plugins: [ new webpack.DefinePlugin({ API : JSON.stringify("123456") }) ]}const webpack = require("webpack")module.exports = { ……, optimization : { // 集中配置webpack内部优化功能 usedExports: true, // 只输出外部使用的成员 minimize: true // 开启压缩 }}module.exports = { ……, optimization : { // 集中配置webpack内部优化功能 usedExports: true, // 只输出外部使用的成员 concatenatemodules: true // 合并尽可能多的模块 }}module.exports = { ……, rules: [ { test: //.js$/, use: { loader: "babel-loader", options: { presets: [ ["@babel/preset-env", { modules: false }] // 默认属性是modules属性默认值是auto，自动转换 ESM 插件是否开启 ] } } } ], ……}// webpack.config.jsmodule.exports = { ……, optimization: { // 集中配置webpack内部优化功能 usedExports: true, // 只输出外部使用的成员 sideEffects: true, // 开启副作用插件 // minimize: true // 开启压缩 }}// package.json{ ……， "sideEffects": false // 是否有副作用}必须确保没有副作用才能用false// package.json{ ……， "sideEffects": ["./src/a.js", "./src/*.css"] // 有副作用的文件}module.exports = { mode: 'none', entry: { index: './src/index.js', album: './src/album.js' }, output: { filename: '[name].bundle.js' // [name]会动态命名 }, ……, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: 'Multi Entry', template: './src/index.html', filename: 'index.html', chunks: ['index'] // 允许插入到模板中的chunks }), new HtmlWebpackPlugin({ title: 'Multi Entry', template: './src/album.html', filename: 'album.html', chunks: ['album'] }) ]}optimization: { splitChunks: { // 自动提取所有公共模块到单独 bundle chunks: 'all' } }const render = () => { const hash = window.location.hash || '#posts' const mainElement = document.querySelector('.main') mainElement.innerHTML = '' if (hash === "#post") { import("./posts/posts.js").then(({ default: posts }) => { // 获取成员 document.body.appendChild(posts) }) } else if (hash === "#album") { import("./album/album.js").then(({ default: album }) => { document.body.appendChild(album) }) }}if (hash === "#post") { import(/*webpackChunkName: "auble" */"./posts/posts.js").then(({ default: posts }) => { document.body.appendChild(posts) }) } else if (hash === "#album") { import("./album/album.js").then(({ default: album }) => { document.body.appendChild(album) }) }const { CleanWebpackPlugin } = require('clean-webpack-plugin')const HtmlWebpackPlugin = require('html-webpack-plugin')const MiniCssExtractPlugin = require("mini-css-extract-plugin")module.exports = { mode: 'none', entry: { main: './src/index.js' }, output: { filename: '[name].bundle.js' }, module: { rules: [ { test: //.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader' ] } ] }, plugins: [ new CleanWebpackPlugin(), new MiniCssExtractPlugin({ linkType: 'text/css', }) ]}new MiniCssExtractPlugin({ filename: "[name]-[hash:8].bundle.css" // :num 限制位数 }
关键词：打包
