以下所有配置必须有nodejs环境支持，最新版本的nodejs默认安装npm包管理器
Download NodeJS :https://nodejs.org/zh-cn/
1.Webpack Install
全局安装：npm install webpack webpack-cli -g
本地安装：npm install webpack webpack-cli -D
注释：以上两种方式默认安装webpack最新版本，指定版本安装：[email protected]
2.初始化vue项目
1.npm init -y 自动生成package.json文件
2.npm install -D webpack webpack-cli 本地安装node_modules，文件包含各种依赖
注释：安装所需依赖：npm install --save xxx ( eg. npm install vue --save)
3.创建dist目标文件夹，src源文件夹，webpack.config.js文件
4.针对图片、css、js、vue文件，安装对应的loader模块，并在webpack.config.js文件中做相关配置
注释：方法：npm install xxx-loader --save-dev ( eg. npm install vue-loader --save-dev)
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
module.exports={
entry:'./src/main.js', //webpack打包入口文件
output:{
path:path.resolve(__dirname,'dist'),
filename:'boudle.js',
publicPath:'dist/'
},
mode:'development',
module:{
rules:[
{
test:/\.css$/, //正则表达式，‘\.’转义‘.’，‘$’结束
use:['style-loader','css-loader'] //注意引入顺序，从右到左解析
},
// 图片文件引入模块配置
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 13000, //图片大小大于limit值时，用file-loader加载，小于limit值用url-loader模块加载(limit可以自定义)
// npm install file-loader --save-dev
name:'img/[name].[hash:8].[ext]'
},
}
]
},
// Es6 转 Es5 模块配置
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/, // 打包时排除该文件目录中的js
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test:/\.vue$/,
use:['vue-loader'],
},
],
},
resolve:{
extensions:['.js','.css','.vue'], // 配置extensions,导入时可省略文件扩展名
alias:{ //别名
'vue$':'vue/dist/vue.esm.js' //用来匹配runtime-compiler(vue.esm.js),而非默认的runtime-only的vue文件
}
plugins: [
new VueLoaderPlugin()
]，
},
}
5.ES6语法转ES5语法
npminstall [email protected] @babel/core @babel/preset-env
module.exports={
...
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader:'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
}
6.配置vue所对应的模块
npm install --save-dev vue-loader vue-template-compiler
webpack.config.js 相关配置 方法一 引入 const { VueLoaderPlugin } = require('vue-loader') 添加插件 plugins: [ new VueLoaderPlugin() ] 方法二 安装 vue-loader 14及以下的版本 直接修改package.json文件，然后 npm install
{
"name": "webpack_vue_demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
//安装的运行时依赖
"dependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"babel-loader": "^8.0.0-beta.0",
"vue": "^2.6.12",
"webpack": "^5.12.2",
"webpack-cli": "^4.3.1"
},
// 安装的开发时依赖
"devDependencies": {
"css-loader": "^5.0.1",
"file-loader": "^6.2.0",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.12"
},
// 脚本定义：npm run xxx ,xxx为定义的脚本名
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "Mr.WuQiangSheng", // 作者
"license": "ISC" // 协议
}
7.扩充知识
a.版权申明
修改 webpack.config.js,添加以下代码
const webpack = require('webpack')
// 若找不到webpack,则需安装：npm install --save webpack
module.exports = {
...
plugins:{
new webpack.BannerPlugin('版权信息')
}
}
b.打包html的plugins
npm install --save-dev html-webpack-plugin
webpack.config.js导入插件：
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
...
plugins:{
new HtmlWebpackPlugin({
template:'index.html'
})
}
}
//传入的{ template:'index.html' }表示根据当前目录下的index.html模板打包
c.搭建本地服务器
npm install [email protected] --save-dev // 是否可以不指定版本安装？
注释:webpack3.x的版本与webpack-dev-server3.x 的版本不兼容,所以必须安装兼容版本的webpack-dev-server ([email protected])
//亲测webpack webpack-cli webpack-dev-server 兼容版本如下：
npm i [email protected] [email protected] [email protected] webpack-dev-server -D
const UglifyjsWebpackPlugin = require('uglifyjs-Webpack-plugin')
module.exports = {
...
devServer:{
contentBase:'./dist', // 服务的根目录
inline:true // 页面实时刷新
port: // 监听端口，默认8080端口
historyApiFallback:
//模式 在SPA页面中，依赖HTML5的history;任意的跳转或404响应可以指向 index.html 页面
}
}
package.json
"script":{
"dev":"webpack-dev-server --open" // --open 自动打开系统默认的浏览器
}
d.js压缩的Plugin: uglifyjs-webpack-plugin
npm install --save-dev uglifyjs-webpack-plugin
const UglifyjsWebpackPlugin = require('uglifyjs-Webpack-plugin')
module.exports = {
...
plugins:{
new UglifyjsWebpackPlugin()
}
}
3.Webpack 配置文件的分离
注：开发时文件和发布时文件分离
1.npm install --save-dev webpack-marge
2.新建build目录，存放production.config.js、development.config.js、base.config.js文件
3.base.config.js作为基础配置文件，development.config.js作为开发时配置文件，production.config.js作为生产时配置文件，相互分离
4.开发和生产将各自的配置内容抽离，并导入公共模块
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports=webpackMerge.merge(baseConfig,{
...
})
5.修改package.json中的脚本文件，下附图 --config 后面时对应npm run xxx命令所用的配置文件
注释：三种配置文件各自负责各自的功能，互不影响，抽离代码要仔细