创建项目目录文件 webpackProject
在桌面鼠标右键新建 webpackProject 文件夹
初始化项目的目录 生成 --pagege.json 的作用就是依赖的单记录，启动命令，版本信息，包管理器
命令 npm init -y
安装 webpack CLI
命令 npm install --save-dev webpack-cli
安装 webpack
命令 npm i webpack -D
对 -g -S -D 的补充
npm i xx -g：npm install xx --global的简写，对模块进行全局安装。
所谓全局安装，是指把模块安装到操作系统上，全局是指操作系统，全局安装完成后，一般会安装到AppDataAppData\Roaming\npm目录下。
如：npm install webpack -g，就是全局安装webpack，在操作系统的任何一个目录下都可以使用webpack所提供的指令。npm i xx -D：npm install xx --save-dev的简写，对模块进行局部安装，模块写入到 devDependencies 对象。
局部的意思是只针对当前项目，模块一般安装到项目文件夹下的node_modules文件夹下。
devDependencies对象，是我们开发的时候需要用到的一些包，只用于开发阶段，真正打包上线的时候并不需要这些包，
因为这些工具只是你用来打包代码的，是用来识别特定文件以及代码，帮助我们生产最终文件的。如npm i vue-loader
vue-template-complier -D,就是在Vue项目中安装vue模板文件的解析插件，经过配置后即可在项目中解析vue模板npm i xx -S：npm install xx --save 的简写，同上也是对模块进行局部安装，不同的是模块写入到 dependencies对象。
模块同上一样将安装到项目文件夹下的node_modules文件夹下。
dependencies对象，这个与devDependencies不同，是需要发布到生产环境中的，就比如你要跑一个基于vue的项目，
所以需要vue.js来支持，vue.js文件就需要跟随项目到最终的生产环境。npm i vue -S即可将Vue模块安装到项目的依赖中，
并一同发布到生产环境。
对插件版本的补充 可以cv到package.json 直接 npm i
{
"name": "webpackProject",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"start": "webpack --config webpack.config.js",
"serve": "webpack serve"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.17.5",
"@babel/preset-env": "^7.16.11",
"babel-loader": "^8.2.3",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^6.6.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"sass": "^1.49.8",
"sass-loader": "^12.6.0",
"style-loader": "^3.3.1",
"url-loader": "^4.1.1",
"vue-loader": "^17.0.0",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.69.1",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"
},
"dependencies": {
"vue": "^3.2.31"
}
}
在根目录下创建一个 webpack.config.js 文件
// 导入核心模块 path
const path = require('path')
// 导入自动生成html文件的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 导入自动清除 dist 目录的插件
const {
CleanWebpackPlugin
} = require('clean-webpack-plugin')
// 配置文件
module.exports = {
// 配置入口
entry: './src/main.js',
// webpack.config.js 文件 配置出口
output: {
filename: 'main[hash:8].js', // 出口文件的名称 'main[hash:8].js' 清除缓存
path: path.join(__dirname, '/dist') // 出口文件生成的路径
},
// 配置 mode, development 开发环境 production 生产环境
mode: 'production',
// 配置解析
resolve: {
alias: {
// key: value
'@': path.join(__dirname, 'src')
},
// 配置可省略的后缀
extensions: ['.js', '.css', '.less', '.vue']
},
// 配置源码映射
// devtool: 'source-map',
// 配置 loader
module: {
// 配置规则
rules: []
},
// 配置 plugin
plugins: [
// 自动生成html文件的插件
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.join(__dirname, './public/index.html')
}),
// 自动清除 dist 目录插件
new CleanWebpackPlugin(),
// 配置 vue loader 插件
],
// 配置开启服务器的信息
devServer: {
static: {
directory: path.join(__dirname, 'dist'),
},
compress: true,
port: 80,
},
performance: {
hints: false
}
}
按照上述配置把对应文件给创建好，如果没有文件就会报错，
安装插件 html-webpack-plugin clean-webpack-plugin
是因为 webpack.config.js 里面有用到
npm i -D html-webpack-plugin clean-webpack-plugin
配置我们的入口文件
在根目录里新建一个 src 的文件夹在里面新建一个 main.js 文件 写入js代码 然后打包后户减少
打包前
function fn() {
console.log('孙志豪')
}
fn()
打包后 会多一个 dist 文件 把 function 去掉了
console.log('孙志豪')
在根目录里面新建一个 public 文件夹
在新建一个 index.html 输入 ! 回车 初始化
写入一个 div 为 id=“#app”
找到 package.json 文件 配置打包命令
"scripts": {
"build": "webpack --config webpack.config.js"
},
然后运行打包的命令
npm run build
此时会多一个叫 dist 的文件夹
设置启动 server 服务器
安装 server 启动的服务器
npm i webpack-dev-server -D
找到 package.json 文件 配置启动服务
"scripts": {
"build": "webpack --config webpack.config.js",
"serve": "webpack serve"
},
在webpack.config.js 配置开启服务器的信息
devServer: {
static: {
directory: path.join(__dirname, 'dist'), // 出口写什么这里就写什么
},
port: 8080, // 配置端口号
open: true, // 自动打开浏览器
hot:true, // 开启模块的热更新
},
运行服务
npm run serve
安装loader
webpack css 样式 引入报错 和 scss 语法错误
这些操作之前需要先安装 ‘style-loader’, ‘css-loader’, ‘sass-loader’
命令 npm i css-loader style-loader sass sass-loader -D
1、在src，目录下新建一个你的css文件
2、 安装完成 在 webpack.config.js 找到 rules 配置 css loader
// 配置规则
rules: [
// * 解析css loader
{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
]
},
// * 解析Scss样式 注意： 配置的顺序是反着来的 从大到小 从右到左
{
test: /\.s[ca]ss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
]
字体 图片 或者别的资源 url-loader file-loader url-loader 依赖于 file-loader
命令 npm i url-loader file-loader -D
安装完成 在 webpack.config.js 找到 rules 配置
rules: [
// * 解析图片 的 loader
{
test: /\.(png|jpg|gif|svg|webp|jpeg)$/,
use: "url-loader"
},
]
安装 babel-loader 用来 让 es6代码让浏览器识别的了
命令 npm install -D babel-loader @babel/core @babel/preset-env
rules: [
// * 解析es6语法 转换 es5
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
]
官网： https://www.webpackjs.com/loaders/babel-loader/
vue-loader 这样安装是 vue3.0 版本
官方网址 https://vue-loader.vuejs.org/zh/
命令 npm i vue
命令 npm install -D vue-loader vue-template-compiler
引入 vue 插件
// webpack.config.js 文件
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
module: {
rules: [
// * vue配置loader
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 请确保引入这个插件！
new VueLoaderPlugin()
]
}
配置完 在main.js里面 写入配置挂载
import {
createApp
} from 'vue'
import App from './App.vue'// 创建app.vue 入口组件
createApp(App).mount('#app')
安装vue 2.0 的 vue 版本配置 以及报错的解决
vue-loader 不能为 16 以上
vue 版本为 2.6.1 必须 和 vue-template-compiler 2.6.1 一致
命令 npm i vue-template-compiler@2.6.1 vue-loader@15.9.8 -D
命令 npm i vue@2.6.1
引入 vue 插件
// webpack.config.js 文件
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
module: {
rules: [
// * vue配置loader
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 请确保引入这个插件！
new VueLoaderPlugin()
]
}
找到min.js文件 配置
import Vue from "vue";
import App from "./App.vue";
new Vue({
render: (h) => h(App),
}).$mount("#app");
创建 App.vue 文件 写代码吧小伙子
347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
