一、创建文件并初始化webpack
webpack下载后,为什么还要安装webpack-cli呢?因为webpack-cli是执行webpack的一个工具,已经从webpack4以后剥离,所以...
大部分vue开发者,在做vue项目的时候存在两种现状:
- 使用vue-cli创建vue项目
- 在别人搭建好的项目中开发
在磁盘或者文件cmd 运行以下命令
// 创建一个项目文件夹
mkdir webpack-demo && cd webpack-demo
// 初始化项目
npm init -y
这个时候,项目文件夹会多出一个package.json文件,可以用npm或者yarn安装webpack 和 webpack-cli;
npm i webpack webpack-cli -D
接下来创建一个src目录,src目录中创建一个main.js文件,在根目录创建一个webpack.config.js文件和public文件夹,在public文件夹中创建index.html
在根目录下添加.gitignore 文件,设置 node_modules 文件夹不上传
这个时候我们的项目结构就像这个样子:
我们给webpack.config.js写点内容:
const path = require('path')
module.exports = {
mode: 'development', // 环境
entry: path.resolve(__dirname, './src/main.js'), // 入口
output: {
path: path.resolve(__dirname, 'dist'), // 出口
filename: 'js/[name].js'
}
}
修改package.json的script属性
"scripts": {
"build": "webpack --config ./webpack.config.js"
}
这里为什么我要写--config呢?这个是我们在运行webpack的时候,可以指定按哪个webpack配置文件来运行,默认是运行webpack.config.js;所以这里可以直接写成 "build": "webpack";
这个时候我们如果运行 npm run build,我们会发现在根目录下生成了一个dist文件夹,文件夹里有一个js/main.js 文件,我们下一步要做的是把这个js文件和根目录下的 index.html 关联起来,将 index.html 作为模板文件,把 js/main.js 动态编译进去;
安装 html-webpack-plugin 插件:
npm i html-webpack-plugin -D
webpack.config.js增加配置:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, './src/main.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js'
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './public/index.html'), // 模板地址
filename: 'index.html', // 输出名
title: '手动搭建的vue开发环境和webpack' // index.html 通过 <%= htmlWebpackPlugin.options.title %> 获取的变量值
})
]
}
给main.js添加一些代码:
const app = document.getElementById('app')
app.textContent = 'Hello world!'
注意index.html的内容 不然不显示以下效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
运行打包构建代码:
npm run build
来看一下dist文件夹中发生了什么变化
运行index.html 如下结果
打包成功不能用 vue
不要着急,接下来马上开始引入vue2;(这里我使用的vue2)
npm i vue@2 -S
main.js 引入
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
// components: { App },
// template: '<App/>'
})
src目录下创建App.vue
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
// components: { App },
// template: '<App/>'
})
接下来运行打包命令会报错,webpack默认不能处理vue文件,只能自己添加额外的插件进行处理
npm i vue-loader vue-template-compiler -D
然后在webpack.config.js
添加如下配置 你会发现还是报错:
module: {
rules: [
{ test:/\.vue$/, loader: 'vue-loader' }
]
}
需如下
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader') // 这里添加vue-loader
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, './src/main.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js'
},
module: { // 这里配置
rules: [
{
test: /\.vue$/,
use: [
'vue-loader'
]
}
]
},
plugins: [ //配置插件的节点,所有插件都要在这里配置
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './index.html'),
filename: 'index.html',
title: '手动搭建的vue开发环境'
}),
new VueLoaderPlugin() // 这里配置
]
}
VueLoaderPlugin可以把你定义的其他规则应用到.vue文件里,比如/\.css$/ 或者 /\.js$/ 等规则,应用到vue文件中的<style> 或者 <script>里;
打包运行太麻烦了,需要直接运行更加直观安装 webpack-dev-server:
npm install webpack-dev-server -D
webpack.config.js增加:
devServer: {
port: 3000, //端口设置
hot: true //热更新
}
修改package.json的 scripts 属性:
"scripts": {
"build": "webpack --config ./webpack.config.js",
"serve": "webpack serve --progress --config ./webpack.config.js"
},
运行本地服务:
npm run serve
webpack
默认只会处理 js 文件,所以在处理其他文件时我们需要安装一些第三方的 loader
加载器
如果我们想要打包处理 css 文件,我们需要安装 style-loader
、 css-loader
这两个插件
npm i style-loader css-loader -D
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
mode: 'development', // 环境
entry: path.resolve(__dirname, './src/main.js'), // 入口
output: {
path: path.resolve(__dirname, 'dist'), // 出口
filename: 'js/[name].js'
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/, // 匹配以.css文件结尾的文件
use: ['style-loader', 'css-loader'] // 指定要处理的.css文件的加载器
},
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './public/index.html'), // 模板地址
filename: 'index.html', // 输出名
title: '手动搭建的vue开发环境' // index.html 通过 <%= htmlWebpackPlugin.options.title %> 获取的变量值
}),
new VueLoaderPlugin()
],
// resolve: {
// alias: {
// 'vue$': 'vue/dist/vue.esm.js'
// }
// },
devServer: {
port: 3000, //设置端口号
hot: true, //热更新
}
}
处理 less 文件
因为 less
编译过来其实也是一种 css 样式,所以我们需要向这样使用 use:['style-loader','css-loader','less-loader']
npm i less -D
npm i less-loader -D
{
test: /\.less$/,
use: ['style-loader','css-loader','less-loader']
}
处理 scss 文件
同上,用scss 就配置scss
npm i sass -D
npm i sass-loader -D
{
est: /\.scss$/,
use: ['style-loader','css-loader','sass-loader']
}
处理 css 文件中的 url 地址
在默认情况下, webpack 是无法处理 css 文件中的 url 地址,不管是图片还是字体库,只要是 url 地址,就处理不了
因此我们需要 url-loader
、 file-loader
,因为 url-loader
依赖 file-loader
{
test: /\.(jpg|png|gif|bmg|jpeg)$/,
use: 'url-loader?limit=7631&name=[name].[ext]'
},
{
test: /\.(ttf|eot|svg|woff|woff2)$/,
use: 'url-loader'
}
url-loader
默认会将图片设置为 base64
进行传递,如果不想设置为 base64
就需要我们将 use:'url-loader'
设置为 use:'url-loader?limit=7631&name=[name].[ext]'
- 在
url-loader
设置参数,就像我们浏览器中的url地址一样 - 我们使用
limit
进行设置,limit
后面的值必须设置成小于图片的大小(单位是:字节 byte),这样图片就会以 url 的形式进行传输,否则图片就会被转为 base64格式的字符串进行传值 - 而后面的
name
参数是对客户端浏览器中的文件名进行设置,会将浏览器中图片文件名设置成路径中一样的文件名,因为经过上面的步骤只会将图片的路径设置成hash值
处理 ES6 的高级语法
在 webpack
中,默认只能处理一部分 ES6 的语法,一些更高级的 ES6 语法 语法或者 ES7 语法,webpack 是处理不了的;这时候,就需要借助于第三方的 loader ,来帮助 webpack 处理这些高级的语法,而第三方的 loader 把高级语法转为低级语法之后,会把结果交给 webpack 去打包到我们要打包的文件中
而我们通过 Babel,可以帮我们将高级的语法转换为低级的语法
在 webpack
中,必须装两套包,才能实现将高级语法转为为低级语法的功能
- 第一套
babel-core
、babel-loader
、babel-plugin-transform-runtime
- 第二套
babel-preset-env
、babel-preset-stage-0
npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/ //这是配置 Babel 来转换 ES 的语法
}