1. 新建web文件夹项目包
初始化包命令
npm init -y
得到package.json
使用npm命令安装需要用到的包
webpack5类
npm i webpack webpack-cli -D
css类loader
npm i less less-loader style-loader css-loader -D
vue类
npm i vue axios
vue类loader
npm i vue-loader vue-template-compiler -D
babel转译类loader(两套命令)
npm i @babel/core babel-loader @babel/plugin-transform-runtime -D
npm i @babel/preset-env @babel/plugin-proposal-class-properties @babel/runtime -D
插件类
npm clean-webpack-plugin html-webpack-plugin webpack-dev-server -D
图片及其他资源loader
npm i url-loader file-loader -D
**
2. web项目下手动创建webpack.config.js文件 配置webpack打包规则
**
const { resolve } = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
//自动清除包
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//导入在内存中生成 html页面的插件
//只要是插件,就一定要放到 plugins 节点中去
//这个插件的两个作用:
// 1.自动在内存中根据指定页面生成一个内存的页面
// 2.自动把打包好的 bundle.js 追加到页面中去
const HtmlWebpackPlugin = require('html-webpack-plugin');
//这个配置文件,其实就是一个JS文件,通过 Node中的模块操作,向外暴露了一个配置对象
module.exports = {
// 入口,表示webpack打包哪个文件
entry: './src/index.js',
//输出相关文件的配置
output: {
//这是指定输出文件的名称
filename: 'build.js',
//指定打包好的文件,输出到哪个目录中去
path: resolve(__dirname, './build')
},
target: 'web',
//这个节点用于配置所有第三方模块加载器
module: {
//所有第三方模块的匹配规则
rules: [
{
//匹配哪些文件
test: /\.less/,
//使用哪些loader进行处理
use: [
'style-loader',
'css-loader',
'less-loader'
]
},
{
///配置处理 .css 文件的第三方loader 规则
test: /\.css/,
//使用哪些loader进行处理
use: [
'style-loader',
'css-loader',
]
},
{
// 处理图片资源,但是处理不了html中img的路径问题//处理图片路径的 loader
test: /\.(jpg|png|gif|jpeg)$/,
loader: 'url-loader',
options: {
// limit 是给定的值,是图片的大小,单位是byte,如果我们引用的图片大于或等于给定给定的limit值,
// 则不会转化为base64格式的字符串,如果图片小于给定的limit值,则图片就会被转化为base64格式的字符串
limit: 8 * 1024,
// 关闭es6
esModule: false,
name: '[hash:10].[ext]' //不重复名字
},
},
{
//处理字体文件的 loader
test: /\.(ttf|eot|woff|woff2|svg)$/,
loader: 'url-loader',
},
{
//配置 Babel 来转换高级的ES语法
test: /\.js$/, use: 'babel-loader',
exclude: /node_modules/
},
//打包vue
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
// 打包其他资源
exclude: /\.(css|js|html|vue)$/,
loader: 'file-loader'
}
]
},
//配置插件的节点
// 自动打包运行
// 指令:npx webpack-dev-server
devServer: {
contentBase: resolve(__dirname,'build'),
compress:true,
port: 4399,
open:true
},
plugins: [
new HtmlWebpackPlugin({
//指定模板页面,将来会根据指定的模板页面路径去生成内存中的页面
template: resolve(__dirname, 'src/index.html'),
//指定生成页面的名称
filename: 'index.html'
}),
// 一般这个插件是配合 webpack -p 这条命令来使用,
// 就是说在为生产环境编译文件的时候,先把 build或dist(就是放生产环境用的文件) 目录里的文件先清除干净,再生成新的。
new CleanWebpackPlugin(),
new VueLoaderPlugin(),
],
//vue有两种形式的代码 分别是compiler(模板)模式和runtime模式(运行时),v
// ue模块的package.json的main字段默认为runtime模式, 指向了"dist/vue.runtime.common.js"位置
// 在main.js文件中,初始化vue是compiler模式的,因此出现上面的报错信息。
resolve: {
alias: {
//使用这个模式的vue防止开发报错
'vue$': 'vue/dist/vue.esm.js'
}
},
// 运行模式 开发模式和production产品模式
mode: 'development',
};
3.web项目根目录下手动创建.babelrc 的Babel配置文件
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]
}
4. 手动修改package.json文件中script部分
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve"
},
build为打包命令
start为自动打包临时文件,并打开浏览器命令
以前的方法webpack-dev-server启动webpack会报以下错误:Error: Cannot find module ‘webpack-cli/bin/config-yargs’
使用webpakc server启动
webpack5和webpack-dev-server3有兼容性问题,使用webpakc server命令启动。暂时还不能启用hot热更新,页面不会自动刷新。
5. 手动创建src文件夹; src文件夹中创建index.html和index.js
完整文件目录