源码：GitHub - leelun/webpack-vue-helloworld
好久不发文章，连发表按钮找了好一会【捂脸】
说明：网上看了几篇教程，都不对付，门都还没入，就耽误几个小时，还是老实的自己去官网了解一下。本人是一名后台开发，不是专业前端，只做快速搭建进入webpack vue快速进入状态说明，不做深入研究，对于前端的童鞋最好前往[官网](概念 | webpack 中文文档)进行系统学习。
以下只是做学习的一种方式说明，以官网为准，npm 安装的包一点版本不同就可能一直报错。
webpack 浅尝辄止系列——第一个webpack项目搭建
1 项目初始化
# 创建目录进入目录 mkdir webpack-demo && cd webpack-demo # 项目初始化 npx webpack-cli init # 接下来根据提示选择自己需要的插件包 ...
选择TypeScript而不是es6理由——官网说明：TypeScript 是 JavaScript 的超集，为其增加了类型系统，可以编译为普通 JavaScript 代码。
选择PostCSS理由——Github文档说明,功能很强大
初始化完成,下面是我选择的依赖包
+ sass-loader@12.4.0 + html-webpack-plugin@5.5.0 + webpack-dev-server@4.7.3 + css-loader@6.5.1 + sass@1.48.0 + webpack-cli@4.9.1 + style-loader@3.3.1 + ts-loader@9.2.6 + typescript@4.5.4 + postcss@8.4.5 + prettier@2.5.1 + autoprefixer@10.4.2 + webpack@5.66.0 + postcss-loader@6.2.1 added 336 packages from 263 contributors, removed 281 packages, updated 3 packages and moved 19 packages in 44.959s
初始化后项目结构图
初始化后package.js
{
"version": "1.0.0",
"description": "My webpack project",
"name": "my-webpack-project",
"scripts": {
"build": "webpack --mode=production --node-env=production",
"build:dev": "webpack --mode=development",
"build:prod": "webpack --mode=production --node-env=production",
"watch": "webpack --watch",
"serve": "webpack serve"
},
"devDependencies": {
"autoprefixer": "^10.4.2",
"css-loader": "^6.5.1",
"html-webpack-plugin": "^5.5.0",
"postcss": "^8.4.5",
"postcss-loader": "^6.2.1",
"prettier": "^2.5.1",
"sass": "^1.48.0",
"sass-loader": "^12.4.0",
"style-loader": "^3.3.1",
"ts-loader": "^9.2.6",
"typescript": "^4.5.4",
"webpack": "^5.66.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.7.3"
}
}
初始化自动得到配置文件官方配置文档
// Generated using webpack-cli https://github.com/webpack/webpack-cli
//path模块 路径处理工具
const path = require("path");
//简化了HTML创建 该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入所有 webpack 生成的 bundle。
const HtmlWebpackPlugin = require("html-webpack-plugin");
//process.env.NODE_ENV 对应上面--node-env=production
const isProduction = process.env.NODE_ENV == "production";
const stylesHandler = "style-loader";
const config = {
entry: "./src/index.ts",//入口文件
output: {//编译后输出目录 及通常npm run build后
path: path.resolve(__dirname, "dist"),
},
devServer: {//web服务配置
open: true,
host: "localhost",
},
plugins: [//插件配置
new HtmlWebpackPlugin({
template: "index.html",
}),
// Add your plugins here
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
],
module: {// 模块配置相关
rules: [// 模块规则（配置 loader、解析器等选项）
{
test: /\.(ts|tsx)$/i,
loader: "ts-loader",
exclude: ["/node_modules/"],
},
{
test: /\.s[ac]ss$/i,
use: [stylesHandler, "css-loader", "postcss-loader", "sass-loader"],
},
{
test: /\.css$/i,
use: [stylesHandler, "css-loader", "postcss-loader"],
},
{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
type: "asset",
},
// Add your rules for custom modules here
// Learn more about loaders from https://webpack.js.org/loaders/
],
},
resolve: {
extensions: ['.ts', '.vue', '.json', ".js", '.png', ".sass",".css"],
alias: {
'@': resolve('src')
}
},
};
module.exports = () => {
if (isProduction) {
config.mode = "production";
} else {
config.mode = "development";
}
return config;
};
2 安装js工具库
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库 查看各个构件版本的区别并选择一个适合你的版本。功能强大，兼容性强。官网说明
npm install --save lodash
3 对配置文件进行开发配置
webpack.config.js
output 配置
output: {
filename: '[name].bundle.js',//name对应多入口
path: path.resolve(__dirname, 'dist'),
clean: true,//每次构建时清空之前的dist输出目录
}
设置title
plugins: [
new HtmlWebpackPlugin({
title: '网页显示title',//filename title不能同时配置
}),
]
开发环境
const config = {
mode: 'development',
...
}
source map 定位错误
const config = {
devtool: 'inline-source-map',
...
}
配置引入文件@
resolve: {
extensions: ['.ts', '.vue', '.json', ".js", '.png', ".sass",".css"],
alias: {
'@': path.join(__dirname, '.', 'src')//'.'根据当前配置webpack.config.js而定
}
}
将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件
# 安装后的版本总是配置不成功，这里我是把它的版本号改为2.4.5 npm install --save-dev mini-css-extract-plugin
配置
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
}
优化和压缩 CSS。
[官网文档](CssMinimizerWebpackPlugin | webpack 中文文档
npm install css-minimizer-webpack-plugin --save-dev
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /.s?css$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
},
],
},
optimization: {
minimizer: [
// 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
// `...`,
new CssMinimizerPlugin(),
],
},
plugins: [new MiniCssExtractPlugin()],
};
生产环境下默认使用 TerserPlugin ，并且也是代码压缩方面比较好的选择
安装
npm install --save-dev closure-webpack-plugin google-closure-compiler
配置
const ClosurePlugin = require('closure-webpack-plugin');
module.exports = {
optimization: {
minimizer: [
new ClosurePlugin({mode: 'STANDARD'}, {
// compiler flags here
//
// for debugging help, try these:
//
// formatting: 'PRETTY_PRINT'
// debug: true,
// renaming: false
})
]
}
};
4 安装vue开发需要包
vue 相关 qs请求转化 加密解密 请求相关
npm install vue vuex vue-router qs crypto-js axios
开发环境依赖包
npm install vue-loader vue-template-compiler --save-dev
5 配置vue环境
(1) webpack.config.js
// Generated using webpack-cli https://github.com/webpack/webpack-cli
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require('vue-loader');
...
const config = {
...
resolve: {//加入.vue解析
extensions: ['.ts', '.vue', '.json', ".js", '.png', ".sass", ".css"],
alias: {
'@': path.join(__dirname, '.', 'src')
}
},
plugins: [
...
new HtmlWebpackPlugin({
filename: "index.html",
template: "index.html" //指定模板文件加入 <div id="app"></div>
}),
new VueLoaderPlugin(),//vue加载插件
],
module: {
...
rules: [
{//vue规则
exclude: /node_modules/,
test: /\.vue$/,
loader: 'vue-loader',
},
],
},
};
(2) index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Webpack App</title> </head> <body> <h1>Hello world!</h1> <h2>Tip: Check your console</h2> <div id="app"></div> </body> </html>
(3) 将入口文件index.js内容修改,这里如果习惯之前的vue构建项目可以修改为main.js 把入口文件名称修改下就行
import Vue from 'vue'
import App from './App.vue'
Vue.directive('title', {
inserted: function (el, binding) {
document.title = el.dataset.title
}
})
Vue.config.productionTip = false
new Vue({
el: '#app',
render: h => h(App)
})
(4) App.vue
<template>
<div id="app">
<hello-world/>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld'
export default {
name: 'App',
components:{
HelloWorld
}
}
</script>
<style lang='scss'>
#app {
height: 100%;
> div {
height: 100%;
}
}
</style>
(5) HelloWorld.vue
<template>
<p>helloworld</p>
</template>
<script lang="ts">
export default {
name:"HelloWorld"
}
</script>
<style scoped>
</style>
6 快速开发
npx webpack-cli init npm install --save lodash vue vuex vue-router qs crypto-js axios npm install --save-dev mini-css-extract-plugin vue-loader vue-template-compiler closure-webpack-plugin google-closure-compiler css-minimizer-webpack-plugin
7 开发问题
vue webpack之vue-router 使用history模式报错Cannot GET /xxx在webpack.config.js中的devServer内添加属性historyApiFallback
historyApiFallback: {
index: '/index.html'//该路径为打包后的首页路径及dist目录下的index.html页面
},
4392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
