Create project directory file webpackProject
Right-click on the desktop to create a new webpackProject folder
The directory generation of the initialization project --pagege.json is the single record of dependencies, startup command, version information, package manager
Command npm init -y
Install webpack CLI
命令 npm install --save-dev webpack-cli
Install webpack
Command npm i webpack -D
Supplement to -g -S -D
npm i xx -g: shorthand for npm install xx --global to install modules globally.
The so-called global installation refers to installing the module on the operating system, and the global refers to the operating system. After the global installation is completed, it is generally installed in the AppDataAppData\Roaming\npm directory.
For example, npm install webpack -g means to install webpack globally, and the instructions provided by webpack can be used in any directory of the operating system.npm i xx -D: shorthand for npm install xx --save-dev, install the module locally, and write the module to the devDependencies object.
Local means only for the current project, and modules are generally installed in the node_modules folder under the project folder.
The devDependencies object is some packages that we need to use during development. It is only used in the development phase. These packages are not needed when the package is actually launched,
because these tools are only used by you to package the code. They are used to identify specific files and code that helps us produce the final file. For example, npm i vue-loader
vue-template-complier -D is to install the parsing plugin for vue template files in the Vue project. After configuration, the vue template can be parsed in the project.npm i xx -S: shorthand for npm install xx --save, the same as above is also a partial installation of the module, the difference is that the module is written to the dependencies object.
The modules will be installed in the node_modules folder under the project folder as above.
The dependencies object, which is different from devDependencies, needs to be released to the production environment. For example, if you want to run a vue-based project, you
need vue.js to support it, and the vue.js file needs to follow the project to the final production environment. npm i vue -S can install the Vue module into the project's dependencies
and publish it to the production environment together.
Create a webpack.config.js file in the root directory
// 导入核心模块 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
}
}
Create the corresponding file according to the above configuration. If there is no file, an error will be reported.
Install the plugin html-webpack-plugin clean-webpack-plugin
Because it is
npm i -D html-webpack-plugin clean-webpack-plugin
Configure our entry file
Create a new src folder in the root directory, create a new main.js file in it, write the js code, and then package and reduce the number of users
打包前
function fn() {
console.log('孙志豪')
}
fn()
打包后 会多一个 dist 文件 把 function 去掉了
console.log('孙志豪')
Create a new public folder in the root directory
Enter a new index.html ! Enter to initialize
write a div as id="#app"
Find the package.json file to configure the packaging command
"scripts": {
"build": "webpack --config webpack.config.js"
},
Then run the packaged command
npm run build
There will be an additional folder called dist
set start server server
Install the server started by server
npm i webpack-dev-server -D
Find the package.json file to configure the startup service
"scripts": {
"build": "webpack --config webpack.config.js",
"serve": "webpack serve"
},
Configure the information to start the server in webpack.config.js
devServer: {
static: {
directory: path.join(__dirname, 'dist'), // 出口写什么这里就写什么
},
port: 8080, // 配置端口号
open: true, // 自动打开浏览器
hot:true, // 开启模块的热更新
},
run service
npm run serve
install loader
webpack css style introduces error and scss syntax error
Before these operations, you need to install 'style-loader', 'css-loader', 'sass-loader'
command 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']
},
]
Font images or other resources url-loader file-loader url-loader depends on 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"
},
]
Install babel-loader to make es6 code recognized by browsers
命令 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']
}
}
},
]
Official website: https://www.webpackjs.com/loaders/babel-loader/
This installation of vue-loader is vue3.0 version
Official website https://vue-loader.vuejs.org/zh/
command npm i vue
command npm install -D vue-loader vue-template-compiler
Introduce vue plugin
// webpack.config.js 文件
const {
VueLoaderPlugin } = require('vue-loader')
module.exports = {
module: {
rules: [
// * vue配置loader
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 请确保引入这个插件！
new VueLoaderPlugin()
]
}
After configuration, write the configuration mount in main.js
import {
createApp
} from 'vue'
import App from './App.vue'// 创建app.vue 入口组件
createApp(App).mount('#app')
Install the vue version configuration of vue 2.0 and the solution to the error
vue-loader cannot be 16 or more
vue version is 2.6.1 must be consistent with vue-template-compiler 2.6.1
Command npm i [email protected] [email protected] -D
Command npm i [email protected]
Introduce vue plugin
// webpack.config.js 文件
const {
VueLoaderPlugin } = require('vue-loader')
module.exports = {
module: {
rules: [
// * vue配置loader
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 请确保引入这个插件！
new VueLoaderPlugin()
]
}
Find the min.js file configuration
import Vue from "vue";
import App from "./App.vue";
new Vue({
render: (h) => h(App),
}).$mount("#app");
Create App.vue file and write code, boy