/**
* webpack打包
* npm init -y
* npm install --save-dev webpack
* npm install --save-dev webpack-cli
* package.json中增加 "start": "webpack --config webpack.config.js"
* package.json中删除 "main": "webpack.config.js",旁边增加"private": true,
* index.html引入 出口中的index.bundle.js
* 参考: https://www.webpackjs.com/guides/getting-started/#%E5%9F%BA%E6%9C%AC%E5%AE%89%E8%A3%85
*/
const path = require("path");
module.exports = {
/**内置的优化 */
mode: "development", //
/**入口 */
entry: "./index.js",
/**出口
* path.resolve() 返回一个以相对于当前的工作目录的绝对路径。
* __dirname 总是指向被执行 js 文件的绝对路径
*/
output: {
filename: "index.bundle.js",
path: path.resolve(__dirname, "dist"),
},
/**类型转换-loader
* 如果使用以下则需要控制台执行下载
* npm install style-loader --save-dev
*/
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "style-loader/url", "css-loader", "sass-loader"],
},
{
test: /\.vue$/, use: "vue-loader" },
{
test: /\.(png|jpg|gif|svg|mp3)$/, use: "file-loader" },
],
},
};
/**
* 当前目录结构
* |-dist
* |-index.bundle.js
* |-img
* |-img1
* |-img2
* |-js
* |-js1
* |-js2
* |-node_modules
* |-index.html
* |-index.js
* |-package-lock.json
* |-package.json
* |-webpack.config.js
*/
webpack packaging-for personal use
Guess you like
Origin blog.csdn.net/u010100877/article/details/120304933
Ranking