webpack打包测试_从零开始搭建项目（一） —— vue2+webpack4

创建目录(根据需要自己取项目名)

mkdir florist

初始化版本库(非必须)

cd florist

git init

关联远程仓库(非必须)

1. 创建远程仓库 florist(Github)

2. 关联远程仓库

git remote add origin git@github.com:uakora/florist.git

3. 拉取远程仓库内容到本地

git pull origin master --allow-unrelated-histories

说明：如果本地有同名文件不同内容，则会有冲突，正常解决即可

使用 NPM 初始化项目

npm init -y // -y：快速初始化

当前项目 florist 内容

安装 webpack webpack-cli

npm install --save-dev webpack webpack-cli

1. 自动生成 node_modules 目录、package-lock.json文件

2. 开发依赖 devDependencies 中增加 webpack、webpack-cli 依赖项

安装 vue

npm install --save vue

编写项目入口相关文件(后续会有调整)

相关目录结构

florist

-- index.html

-- src

-- -- main.js

-- -- Vue.app

1. 编写 index.html 文件

在项目根目录下创建一个 index.html, 作为项目主页文件, 编写如下内容：1)

从零开始手动搭建 vue 项目

2. 编写 vue 根实例

创建 src 目录. 在 src 目录下创建 main.js 作为项目的总入口文件，在 main.js 中, 完成如下操作：

创建 vue 根实例

挂载 App 组件

1)创建 vue 根实例

src/main.js

// 从 vue 包中导入 Vue 对象

import Vue from 'vue';

// 创建 Vue 根实例

new Vue({

el: '#app'

});

2)实现 App 组件

src/App.vue

{{ title }}

export default {

name: 'App',

data() {

return {

title: '从零开始手动搭建 vue 项目'

}

}

}

h3 {

color: #42b983;

}

3)挂载并渲染 App 组件

src/main.js

import Vue from 'vue';

import App from './App.vue';

new Vue({

el: '#app',

components: {

App: App

},

template: ''

});

// render 写法

// new Vue({

// render: h => h(App)

// }).$mount('#app');

3. 引入 main.js 测试

在 index.html 主页文件中引入 main.js, 测试, 发现报错!!!

从零开始手动搭建 vue 项目

webpack 基本配置

为了让浏览器能够正确解析，我们可以通过配置 webpack，将项目代码打包成浏览器可正确解析的代码

1. 创建 webpack 配置文件

在根目录下创建 webpack 配置文件 webpack.config.js, 编写最基本的配置

// 使用node的path模块

const path = require('path')

module.exports = {

// 打包的入口

entry: './src/main.js',

// 打包的出口

output: {

filename: 'bundle.js',

path: path.resolve(__dirname, 'dist')

}

}

2. 编写 webpack 执行脚本

在 packpage.json 中, 创建一个执行脚本

这样就可以通过npm run build来执行 webpack 打包了

3. 打包测试

在命令行中执行npm run build，会发现提示这个错误

原因是: webpack 只能打包 js 文件. 对于后缀名为 vue 的文件不能打包. 如何解决 呢?

通过 vue-loader 来打包 vue 文件

安装、配置 vue-loader 和 vue-template-compiler

vue-loader 和 vue-template-compiler 需要一起安装。【官方说明】

1. 安装 vue-loader 和 vue-template-compiler

npm install -D vue-loader vue-template-compiler

安装完成后, 发现 vue-loader 依赖 css-loader, 因此我们也要手动安装一下 css-loader

2. 安装 css-loader

npm install -D css-loader

3. 配置 vue-loader

// 使用node的path模块

const path = require('path')

// 引入vue-loader插件

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {

// 打包的入口

entry: './src/main.js',

// 打包的出口

output: {

filename: 'bundle.js',

path: path.resolve(__dirname, 'dist')

},

// 打包规则

module: {

rules: [

{

test: /\.vue$/,

loader: 'vue-loader'

}

]

},

plugins: [

// 请确保引入这个插件！

new VueLoaderPlugin()

]

}

4. 重新打包测试

发现之前的报错解决了，但是有一个警告、一个新错误

原因分析：

警告：需要设置模式 development(开发)、production(生产)或 none

错误：webpack 不能解析 .vue 文件中的 css样式，需要配置相关的loader

安装、配置 css 相关 loader

css 文件是前端项目必不可少的文件, webpack 通过 css-loader 和 style-loader 来打包 css 文件

1. 作用说明

css-loader: 解决文件之间的依赖关系, 把所有的 css 文件打包成一个文件

style-loader: 将 css-loader 打包完成后生成的文件挂载到页面的 head 标签的 style 中

vue-style-loader: 是 vue-loader 自带的 style-loader, 在 style-loader 的基础上, 还可以处理 vue 文件中的样式

2. 安装

css-loader 已经安装过

vue-style-loader 包含在 vue-loader中，不用安装(此处也先不用)

安装style-loader

npm install --save-dev style-loader

3. 配置

// 使用node的path模块

const path = require('path')

// 引入vue-loader插件

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {

mode: 'development',

// 打包的入口

entry: './src/main.js',

// 打包的出口

output: {

filename: 'bundle.js',

path: path.resolve(__dirname, 'dist')

},

// 打包规则

module: {

rules: [

{

test: /\.vue$/,

loader: 'vue-loader'

},

{

test: /\.css$/,

use: ['style-loader', 'css-loader']

}

]

},

plugins: [

// 请确保引入这个插件！

new VueLoaderPlugin()

]

}

4. 重新打包测试

打包成功

5. 在主页中引入 bundle.js

在 index.html 中引入 bundle.js 测试, 发现报错

原因分析:

在 Vue 的 NPM 包的 dist/ 目录下有很多不同的 Vue.js 构建版本。【官网说明】

而默认导出的是只包含运行时的版本vue.runtime.js(体积较小), 如何解决呢?

根据官网说明，可以有两种解决方案

5.1 解决方案一：在 webpack 中, 添加 Vue【完整版】的别名配置

resolve: {

alias: {

'vue': 'vue/dist/vue.esm.js'

}

},

5.2 解决方案二：使用 render 渲染函数

先注释掉之前的 vue 别名配置

调整 vue 跟实例初始化方法

加载静态资源

以加载图片为例

增加目录、文件：

florist

-- src

-- -- assets

-- -- -- css

-- -- -- -- global.css

-- -- -- images

-- -- -- -- avatar.png

-- -- -- -- bg.jpg

-- -- -- -- logo.svg // 1.6KB

1. 全局样式文件 global.css 中加载背景图片

*,::after,::before {

box-sizing: border-box

}

html, body {

margin: 0 !important;

padding: 0 !important;

width: 100%;

height: 100%;

color: #333;

font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;

}

body {

background-image: url('../images/bg.jpg');

background-repeat: no-repeat;

background-attachment: fixed;

background-position: center center;

background-size: cover;

background-color: #fff;

}

2. App.vue 中加载 logo 和 avatar 图片

{{ title }}

export default {

name: 'App',

data() {

return {

title: '从零开始手动搭建 vue 项目'

}

}

}

h3 {

color: #333;

}

.avatar {

display: inline-block;

width: 80px;

height: 80px;

background-image: url('./assets/images/avatar.png');

background-position: center center;

background-repeat: no-repeat;

background-size: cover;

border-radius: 50%;

}

3. 打包测试

显然会报错

4. 安装配置 file-loader、url-loader

关于 url-loader：

1)功能类似于 file-loader，但是在文件大小(单位 byte)低于指定的限制时，可以返回一个 DataURL

2)好处是: 直接将小图片打包以 base64 打包在 js 中, 减少 Http 请求的次数, 提高访问效率

3)由于 url-loader 依赖 file-loader, 因此安装 url-loader 需要先安装 file-loader

4.1 安装 file-loader、url-loader

npm install --save-dev file-loader url-loader

4.2 配置 url-loader

{

test: /\.(jpg|png|svg)$/,

loader: 'url-loader'

}

打包测试：

发现图片都以 DataURL 的形式 打包在 js 文件中

设置 url-loader 的 limit 选项，重新打包测试

{

test: /\.(jpg|png|svg)$/,

use: [

{

loader: 'url-loader',

options: {

limit: 8192, // 单位 Byte，8192Byte = 8KB

}

}

]

}

发现图片大小大于 8K 的背景图片(bg.jpg)和头像(avatar.png)这次没有被打包入 js 文件

设置选项 name 和 outputPath，重新打包测试

{

test: /\.(jpg|png|svg)$/,

use: [

{

loader: 'url-loader',

options: {

outputPath: 'images',

name: '[name].[contenthash:4].[ext]',

limit: 8192, // 单位 Byte，8192Byte = 8KB

}

}

]

}

5. 加载 index.html 文件，查看结果

发现图片不能正常加载

原因分析

调整 index.html 文件到 dist 目录

发现背景图片、头像都加载出来了，但是 logo 图标没加载成功，图片路径也显示成 `[object Module]`

原因分析与解决

logo.svg 的加载代码：

Vue官方文档中说了 vue-loader 的基本原理，它会将 Vue 模板中的 转为下面这段JS代码：

createElement('img', {

attrs: {

src: require('../image.png') // require()是CommonJS模块语法

}

})

而 file-loader 默认采用ES模块语法，即 import '../image.png'；

二者不一致。要么让 file-loader 或 url-loader 采用CommonJS语法，要么让Vue采用ES语法。

刚好 file-loader 或 url-loader 有一个esModule选项能调整，将其设置为false即可：

{

test: /\.(jpg|png|svg)$/,

use: [

{

loader: 'url-loader',

options: {

outputPath: 'images',

name: '[name].[contenthash:4].[ext]',

limit: 8192, // 单位 Byte，8192Byte = 8KB

esModule: false

}

}

]

}

6. 最终显示结果

到此，Vue 项目基本结构已搭建成型，当然还有很多优化

使用 html-webpack-plugin 插件

1. 安装 html-webpack-plugin

npm install --save-dev html-webpack-plugin

2. 配置 html-webpack-plugin

...

const HtmlWebpackPlugin = require('html-webpack-plugin')

...

plugins: [

new HtmlWebpackPlugin({

template: 'index.html' // 作为模板文件

}),

// 请确保引入这个插件！

new VueLoaderPlugin(),

],

...

3. 将 index.html 文件放回根目录，并删除 js 脚本的引入

4. 打包测试

使用 clean-webpack-plugin 插件

1. 安装 clean-webpack-plugin

npm install --save-dev clean-webpack-plugin

2. 配置 clean-webpack-plugin

...

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

...

plugins: [

new CleanWebpackPlugin(),

new HtmlWebpackPlugin({

template: 'index.html'

}),

// 请确保引入这个插件！

new VueLoaderPlugin(),

],

...

使用 css 预处理器 Sass/SCSS

1. 安装 sass-loader、node-sass

npm install -D sass-loader node-sass

2. 配置 sass-loader

...

{

test: /\.(sa|sc|c)ss$/,

use: [

'vue-style-loader',

{

loader: 'css-loader',

options: {

importLoaders: 1,

esModule: false, // css-loader4.0后，esModule默认为 true

}

},

'sass-loader'

]

},

...

3. 调整文件、打包测试

使用 autoprefixer 插件

autoprefixer 插件是 postcss-loader 提供的一个插件, 如果要使用这个插件, 先安装 postcss-loader

1. 安装 postcss-loader autoprefixer

npm install -D postcss-loader autoprefixer

2. 配置 postcss-loader

...

{

test: /\.(sa|sc|c)ss$/,

use: [

'vue-style-loader',

{

loader: 'css-loader',

options: {

importLoaders: 1,

esModule: false, // css-loader4.0后，esModule默认为 true

}

},

'postcss-loader', // postcss-loader 添加位置

'sass-loader'

]

},

...

3. 新建 postcss.config.js 配置文件

module.exports = {

plugins: [require('autoprefixer')]

}

4. 在 package.json 中配置 browserslist

也可以直接在 postcss.config.js 文件中配置，但不配置会导致 autoprefixer 不起作用

"browserslist": [

"defaults",

"not ie < 11",

"last 2 versions",

"> 1%",

"iOS 7",

"last 3 iOS versions"

]

5. 测试打包

5.1 在 App.vue 中使用 CSS3 属性 transform

h3 {

color: #333;

transform: translate(100px, 100px);

}

5.1 查看结果