[官方文档地址](https://webpack.js.org/guides/getting-started/#basic-setup)
[插件下载地址](https://www.npmjs.com/)
packge.json >
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack serve --config config/dev.config.js",
"dev": "webpack --config config/dev.config.js",
"serve": "webpack --config config/dev.config.js",
"build": "webpack --config config/prod.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0",
"sass": "^1.49.9",
"sass-loader": "^12.6.0",
"style-loader": "^3.3.1",
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"
},
"dependencies": {
"lodash": "^4.17.21"
}
}
dev.config.js 》
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development', // 模式
entry: './src/main.js', // 入口
output: { // 输出
path: path.join(__dirname, '../dist'), // 输出目录
filename: 'js/app.[chunkhash:8].js', // 主文件命名
// filename: 'main.js',
clean: true, // 自动清理 dist 目录
},
module: { // 模块处理
rules: [ // 处理规则
{
test: /\.css$/i, // 后缀名以 .css 结尾的文件
use: [ // 使用 loader 处理
'style-loader', // 添加 <style> 标签到 <head> 内部
'css-loader', // 识别 css 样式
],
},
{
test: /\.scss$/i, // 后缀名以 .scss 结尾的文件
use: [ // 使用 loader 处理
'style-loader', // 添加 <style> 标签到 <head> 内部
'css-loader', // 识别 css 样式
'sass-loader', // 识别编译 scss 文件
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, '../src/index.html'), // 以指定目录下资源作为模板
})
],
devServer: {
port: 9527,
open: true,
},
}
src/main.js >
import _ from 'lodash' //引入lodash
// const _ = require('lodash')
import style from './style.css' //引入css和scss
import './style.scss'
function component() {
const element = document.createElement('div');
// // lodash(目前通过一个 script 引入)对于执行这一行是必需的
// lodash 在当前 script 中使用 import 引入
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
element.classList.add('box')
element.classList.add('container')
return element;
}
document.body.appendChild(component());
webpack简单实用
最新推荐文章于 2024-05-16 09:55:01 发布