- npm init -y
- 初始化工程生成 package.json
- npm install webpack webpack-cli -D
- 安装 webpack -D: 安装开发环境依赖
- 编写 index.html
- 写上 id 为'app'的 div 标签
- 编写 vue 根实例
-
在 main.js 中,创建 vue 跟实例、挂载 app 组件
1). 安装 vue
-
npm install vue
2). 创建 Vue 根实例挂载组件
new Vue({ el: "app", components: { //组件名: 组件对象 App: App, }, template: "<App/>", });
3). 在 index.html 引入 main.js,发现需要打包
- 新建 webpack.config.js
//model.export{
//打包入口
//打包出口
}
- 在 package.json 设置
"scripts": {
"build": "webpack"
},
}
- 安装插件
npm install vue-loader vue-template-compiler -D
npm install -D css-loader
- webpack 配置
// 使用node的path模块
const path = require("path");
// 引入vue-loader插件
const VueLoaderPlugin = require("vue-loader/lib/plugin");
module.exports = {
//模式
mode: "production",
// 打包的入口
entry: "./src/main.js",
// 打包的出口
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
// 打包规则
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
},
],
},
plugins: [
// 请确保引入这个插件!
new VueLoaderPlugin(),
],
};
-
webpack.config.js 在配置中添加 mode:'development'
-
在 index.html 中引入 bundle.js
- Vue 会打包生成三个文件: 1). runtime only 的文件 vue.common.js 2).compiler only 的文件 compiler.js 3).runtime + compiler 的文件 vue.js
- 默认导入第一个需要 webpack 中配置
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
},
- 总结
- webpack 本身只能打包 js 文件,如果要打包其他文件就需要 loader
- loader 其实就是专门用于特定文件的处理程序
- 打包是把多个 js 文件打包成一个减少请求,提升相应效率
- 打包图片文件
npm i file-loader -D
//如果是图片则用file-loader打包
{
test: /\.(jpg|jpeg|png|svg)$/,
loader: 'file-loader',
//打包图片自定义命名
options: {
name: '[name].[ext]'
}
}
-
url-loader
-
css 打包
npm i css-loader style-loader -D
//如果是图片则用file-loader打包
{
test: /\.(jpg|jpeg|png|svg)$/,
loader: 'file-loader',
//打包图片自定义命名
options: {
name: '[name].[ext]'
}
}
-
css-loader: 解决文件之间的依赖关系, 把所有的 css 文件打包成一个文件
-
style-loader: 将 css-loader 打包完成后生成的文件挂载到页面的 head 标签的 style 中
- 打包 stylus 文件
npm i -D stylus stylus-loader
module: {
rules: [{
test: /\.styl(us)?$/,
use: ['style-loader', 'css-loader', 'stylus-loader']
}]
},
- 使用 html-webpack-plugin 插件
- 自动生成 index.html,把打包好的 js 文件引入进去
- clean-webpack-plugin
- 自动删除源 js,然后生成打包
- autoprefixer 插件
- css 加各个浏览器前缀 npm install -D postcss-loader autoprefixer postcss
- devServer
- webpack-dev-server 提供一个简单的 web 服务器,并且能够实时重新加载 保存时实时更新并自动重新打包
npm i -D webpack-dev-server
// webpack.config.js devServer配置
devServer: {
// 指定服务器根目录
contentBase: './dist',
// 自动打开浏览器
open: true
// 启用热模块替换
hot: true
},
//package.json
"start": "webpack-dev-server"
- 热模块替换
new webpack.HotModuleReplacementPlugin();
- SourceMap
- 在开发时快速定位到出错的源代码行
- 分别指定两个配置文件 webpack.dev.js webpack.prod.js
"scripts": {
"dev": "webpack-dev-server --config ./webpack.dev.js",
"build": "webpack --config ./webpack.prod.js"
},
- 提取公共部分
-
安装 webpack-merge
-
新建 webpack.base.js 提取公共部分,引入 dev,prod,中 merge 合并
- babel 是一个 javaScript 编译器 可以把 es6 转为 es5
npm install -D balel-loader @balel/core
npm install @babel/preset-env -D
//添加打包规则
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }
//创建.babelrc 配置文件
{ "presets": ["@babel/preset-env"] }