• 欢迎来到本博客,希望可以y一起学习与分享

vue下了解webpack配置

JavaScript/Jquery benz 2年前 (2019-02-21) 99次浏览 0个评论 扫描二维码

目录

文章目录[隐藏]

简单的使用webpack进行打包

创建一个目录作为项目目录,执行命令:
npm init
进行项目初始化,这个过程会填写一些项目的基本信息,有需要就填写,没有的话,就一直回车默认,执完毕,会生成名为package.json的文件。

安装webpack

执行命令:
npm install webpack
来安装webpack。
如果是webpack4还需要安装webpack-cli:npm install webpack-cli

安装vue

执行命令:
npm install vue
安装vue模块。

在项目根目录新建文件:index.html

 

然后,在项目根目录下创建src文件夹,作为源码放置的目录。在src目录下创建App.vue文件:

这几个部分组成了vue的基本结构。
我们在App.vue里写一些简单的vue语法代码:

这只是一个vue组件,浏览器只会处理普通的html文件,所以要把vue转换成普通的html文件结构。这时,可以创建vue入口文件,在src目录里创建main.js作为入口文件:

挂载的第二种方法

除了使用vue的el属性指明挂载点,还可以使用$mount()来完成挂载,效果一样:

简单配置webpack

简单的vue写好了,那么现在使用webpack来打包处理vue,在这之前,需要配置一下webpack,告诉webpack的处理规则。在项目根目录创建名为webpack.config.js的文件作为webpack的配置文件:

为什么会有filename上的格式

这是es6提供的一种语法。
[name]:取得文件名;
[hash:8]:取得hash值,长度截取为8个字符;
此外还有一些额外的模板符号:

  • [hash] 模块标识符(module identifier)的 hash
  • [chunkhash] chunk 内容的 hash
  • [name] 模块名称
  • [id] 模块标识符(module identifier)
  • [query] 模块的 query,例如,文件名 ? 后面的字符串

vue是运行时依赖,webpack需要合适loader将vue文件解释为webpack可以理解的格式用于构建,所以我们需要vue-loader来转换vue单文件。

使用npm安装vue-loader:

npm install vue-loader
vue单文件中分为三个部分,其中template部分需要专用的插件进行转换。

安装vue-template-compiler:

 

npm install vue-template-compiler
这个使用vue-loader自动调用的插件,也是官方默认的,不需要任何配置。

如果你不使用他,打包的时候会报错。

简单来说他的功能是将template部分的模板转为render函数。

然后我们需要处理css,vue-loader需要css-loader才可以运行。同时也需要安装:vue-style-loader。

安装css-loader、vue-style-loader:

npm install css-loader vue-style-loader
css-loader的作用仅仅是将css转为webpack可以解释的类型,如果我们需要将样式使用起来插入到html中,必须使用额外的插件。

插件的安装

vue-loader

VueLoaderPlugin在vue-loaderv15的版本中,这个插件是必须启用的。

html-webpack-plugin

这个插件可以自动生成一个html文件,并且将资源文件按照正确顺序插入到html中。

安装html-webpack-plugin:

npm install html-webpack-plugin
webpack.config.js添加配置

clean-webpack-plugin

当你多次打包的时候,你会发现由于使用hash来命名输出的文件每次的文件名称都不一样,导致文件越来越多。

使用CleanWebpackPlugin可以每次构建前清空输出目录。

安装:

npm install clean-webpack-plugin
编辑webpack.config.js:

创建项目webpack打包命令

可以使用全局的webpack命令来打包,但是不推荐,会造成混乱。打开package.json,在”scripts”:{}里创建webpack打包命令:

"build": "webpack --config webpack.config.js"
“build”:是一个键名;
“webpack –config webpack.config.js”:webpack --config使用指定的webpack配置文件来进行打包操作,webpack.config.js是我们写的webpack配置文件。

打包项目

在命令终端,执行命令:
npm run build
即可webpack打包项目,成功后会在根目录生成的一个名为dist的文件夹,里面是打包好的文件。

配置module

配置 Loader

rules  配置模块的读取和解析规则,通常用来配置 Loader。其类型是一个数组,数组里每一项都描述了如何去处理部分文件。 配置一项 rules 时大致通过以下方式:

  1. 条件匹配:通过  test 、 include 、 exclude  三个配置项来命中 Loader 要应用规则的文件。
  2. 应用规则:对选中后的文件通过 use 配置项来应用 Loader,可以只应用一个 Loader 或者按照从后往前的顺序应用一组 Loader,同时还可以分别给 Loader 传入参数。
  3. 重置顺序:一组 Loader 的执行顺序默认是从右到左执行,通过 enforce 选项可以让其中一个 Loader 的执行顺序放到最前或者最后。

下面来通过一个例子来说明具体使用方法:

在 Loader 需要传入很多参数时,你还可以通过一个 Object 来描述,例如在上面的 babel-loader 配置中有如下代码:

上面的例子中 test include exclude 这三个命中文件的配置项只传入了一个字符串或正则,其实它们还都支持数组类型,使用如下:

数组里的每项之间是或的关系,即文件路径符合数组中的任何一个条件就会被命中。

noParse

noParse 配置项可以让 Webpack 忽略对部分没采用模块化的文件的递归解析和处理,这样做的好处是能提高构建性能。 原因是一些库例如 jQuery 、ChartJS 它们庞大又没有采用模块化标准,让 Webpack 去解析这些文件耗时又没有意义。

noParse 是可选配置项,类型需要是 RegExp[RegExp]function 其中一个。

例如想要忽略掉 jQuery 、ChartJS,可以使用如下代码:

注意被忽略掉的文件里不应该包含 import 、 require 、 define 等模块化语句,不然会导致构建出的代码中包含无法在浏览器环境下执行的模块化语句。

parser

因为 Webpack 是以模块化的 JavaScript 文件为入口,所以内置了对模块化 JavaScript 的解析功能,支持 AMD、CommonJS、SystemJS、ES6。 parser 属性可以更细粒度的配置哪些模块语法要解析哪些不解析,和 noParse 配置项的区别在于 parser 可以精确到语法层面, 而  noParse  只能控制哪些文件不被解析。 parser 使用如下:

 

webpack打包其他资源使用的处理器

webpack的resolve属性使用

图片、多媒体以及字体处理

安装url-loader:npm install url-loader
安装file-loader:npm install file-loader

配置webpack

配置图片处理模块规则:

sass

在App组件写下一个sass语法,要在style标签标明语言,lang="scss",不是sass,这个要注意:

配置webpack

安装sass-loader:npm install sass-loader
安装node-sass:npm install node-sass
配置sass模块规则:

webpack-dev-server配置与使用

执行命令:npm i webpack-dev-server安装webpack-dev-server。

webpack.config.js配置webpack-dev-server

webpack-dev-server的配置需要对原来的webpack.config.js的结构做一点小改动,并且配置。

package.json中使用webpack-dev-server命令

打开package.json,编辑脚本命令,使用webpack-dev-server。因为一般是在开发环境使用到webpack-dev-server,所以只在开发环境使用webpack-dev-server:

标记webpack配置文件属于什么环境

打开webpack.config.js,加上配置mode: "development",这个属性是webpack4的,webpack3没有:

cross-env

cross-env一般用于webpack3,webpack4用不到。webpack-dev-server需要区别不同的开发环境来读取配置文件,这就要借助cross-env来帮助webpack-dev-server完成这个事情。执行命令:npm install cross-env安装cross-env。
打开package.json 使用cross-env:

NODE_ENV=指定当前的环境,这个值会存储到node.js的全局变量中,可以通过process.env.NODE_ENV来获取到这个值。

回到webpack.config.js:

webpack默认插件

webpack它自己也有个插件,一般是默认使用,如果需要定制这个插件,则需要先引入webpack。

webpack.config.js添加配置:

在控制台执行命令:
npm run dev
就会打包项目并生成一个服务器,访问服务器地址就可以浏览到内容。

webpack-dev-server的其它配置项

1、contentBase

用于告诉服务器文件的根目录。这主要用来需要引用静态文件的时候。devServer.publicPath被用来规定变异文件的路径地址,在下面将详细介绍。

默认情况下就是当前工作的文件夹地址,但是可以修改为其他的地址
contentBase: path.join(__dirname, "public")

2、historyApiFallback

这个配置属性是用来应对返回404页面时定向到特定页面用的。
语法是向historyApiFallback对象中的rewrites属性传一个对象格式,如下:

3、host

设置服务器的主机号,默认是localhost,但是可以自己进行设置,如:

host: "0.0.0.0"
此时,localhost:7000和0.0.0.0:7000都能访问成功

4、port

设置端口号,如下面的7000

5、hot 和 inline

自动刷新和模块热替换机制

5.1 hot
热模块替换机制

hot: true

注意,如果你的项目中使用了热模块替换机制,HotModuleReplacementPlugin插件会自动添加到项目中,而不需要再在配置文件中做添加。

5.2 inline
webpack-dev-server有两种模式可以实现自动刷新和模块热替换机制
1. Iframe mode(默认,无需配置)
页面被嵌入在一个iframe里面,并且在模块变化的时候重载页面
2.inline mode(需配置)添加到bundle.js中
当刷新页面的时候,一个小型的客户端被添加到webpack.config.js的入口文件中

6、compress

这是一个布尔型的值,当它被设置为true的时候对所有的服务器资源采用gzip压缩
采用gzip压缩的优点和缺点:

优点:对JS,CSS资源的压缩率很高,可以极大得提高文件传输的速率,从而提升web性能
缺点:服务端要对文件进行压缩,而客户端要进行解压,增加了两边的负载

7、overlay

用于在浏览器输出编译错误的,默认是关闭的,需要手动打开:

overlay: true

如果你想将warnings一同打印出来,可设置:

8、stats

这个配置属性用来控制编译的时候shell上的输出内容,因为我们并不需要所有的内容,而只是需要部分的如errors等
在shell中只输出errors:

stats: "errors-only"

9、open

当open选项被设置为true时,dev server将直接打开浏览器

10、proxy

重定向是解决跨域的好办法,当后端的接口拥有独立的API,而前端想在同一个domain下访问接口的时候,可以通过设置proxy实现。

如果后端接口地址是10.10.10.10:3000,你可以这样设置:

一个 “/api/users”地址的请求将被重定向到”http://10.10.10.10:3000/api/users“,如果不希望”api”在传递中被传递过去,可以使用rewrite的方式实现:

11、publicPath

用于设置编译后文件的路径,假设服务器的运行地址是 http://localhost:8080,输出文件名设置为bundle.js,那么默认情况下publicPath是”/”,因此文件地址为http://localhost:8080/bundle.js 如果想要设置为别的路径可以这样:

publicPath: "/assets/"

设置后文件地址为:http://localhost:8080/assets/bundle.js
注意:
确保publicPath的书写规则:前后都有一个斜杠!

webpack配置动态加载

有时候,不同环境,需要加载不同的配置,以在开发环境中,webpack-dev-server开启热加载,需要加载两个插件为例:
打开webpack.config.js,配置一下:

webpack调试工具:devtool

在网页调试代码,因为我们写的代码被编译过,调试的时候看不懂。需要借助devtool,做一下源码的映射,调试的时候显示源码。

在webpack.config.js配置:

render与template使用的vue文件有所不同

刚开始,入口文件vue的渲染是使用render()方法渲染的:

其实,vue的渲染除了render()方法外还可以使用vue的template属性来做:

这时,运行的时候发现报错了:

[Vue warn] : You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build. (found in root instance)

关键词是:“ runtime-only”。
原来vue js源码文件,有三种,分别是vue.js、vue.common.js和compiler.js。默认情况下,如果使用import vue from 'vue'导入vue, vue 默认导出的是 vue.common.js,也就是说默认下我们使用的vue源码文件是vue.common.js。
为什么 vue 默认导出的是 vue.common.js,它和 vue.js 的区别在哪里,又有什么关系?

Vue 最早会打包生成三个文件,一个是 runtime only 的文件 vue.common.js,一个是 compiler only 的文件 compiler.js,一个是 runtime + compiler 的文件 vue.js。

也就是说,vue.js = vue.common.js + compiler.js,而如果要使用 template 这个属性的话就一定要用 compiler.js,那么,引入 vue.js 是最恰当的。
这也就说明了为什么默认情况下使用vue的template属性会报“runtime-only”的错误。

解决方法

在webpack给vue别名重新指定vue文件,声明import Vue from 'vue'中的vue使用的是哪个vue文件。

配置vue的jsx写法以及postcss

postcss

PostCSS是什么?
它可以被理解为一个平台,可以让一些插件在上面跑

它提供了一个解析器,可以将CSS解析成抽象语法树

通过PostCSS这个平台,我们能够开发一些插件,来处理CSS。热门插件如autoprefixer。

执行命令:npm install postcss-loader autoprefixer安装这些模块。
在根目录下创建postcess.config.js用于配置postcss:

然后,来到webpack.config.js来配置一下:

jsx

因为jsx的语法需要es6支持,所以需要安装babel:

执行命令:npm install babel-core babel-loader

如果安装的babel-loader版本在8.0以上的,要求babel-core的版本在7.0以上,不过babel-core的7.0以上的版本需要通过这样的命令安装:npm install @babel/core

在根目录下创建.babelrc用于配置babel:

执行命令:npm install babel-preset-env babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props

babel preset将基于你的实际浏览器及运行环境,自动的确定babel插件及polyfills,转译ES2015及此版本以上的语言,在没有配置项的情况下,你也可以通过配置polyfills和transforms来支持你所需要支持的浏览器,仅配置需要支持的语法来使你的打包文件更轻量级。

来安装所使用的到的模块。安装完后可能会提示还需要安装其它依赖,按提示,自己手动安装就好了。

jsx的demo

jsx其实和vue文件的结构相似,vue的html代码写在template里,而jsx则写在了render方法中:

定义了一个jsx,可以看做是一个vue组件:

sass文件如下:

css单独分离打包

执行命令:
npm install extract-text-webpack-plugin
安装好插件。
来到webpack.config.js进行配置:

在命令行,执行命令:npm run build,就可以在dist文件夹下看见生成的文件。其中有一个css文件,那是分离css单独打包的,但是里面不包含每个vue主键的css代码。

webpack区分打包类库代码及hash优化

为什么要把vue文件和其他类库分开打包,这是应为这些文件是比较稳定的,一般改动都是一些业务文件,只需更新业务文件就可以了。而不用修改的文件浏览器也会一直缓存起来,加快加载速度。
打开webpack.config.js:

hash与chunkhash区别:
hash一次打包所生成的hash值都一样的,chunkhash则是不同的。

从webpack4开始官方移除了commonchunk插件,改用了optimization属性进行更加灵活的配置,这也应该是从V3升级到V4的代码修改过程中最为复杂的一部分,下面的代码即是optimize.splitChunks 中的一些配置参考

稍微解释一下含义

  • cacheGroups:可以自己设置一组一组的cache group来配对应的共享模块
  • commons:里面的name就是生成的共享模块bundle的名字
  • chunks:有三个可选值,”initial”, “async” 和 “all”. 分别对应优化时只选择初始的chunks,所需要的chunks 还是所有chunks 。
  • minChunks :是split前,有共享模块的chunks的最小数目 ,默认值是1, 但我看示例里的代码在default里把它重写成2了,从常理上讲,minChunks = 2 应该是一个比较合理的选择吧。

项目webpack整理

在项目根目录新建一个名为build文件夹,统一存放webpack等配置文件

webpack配置文件抽离

webpack配置抽离后,需要多个零散的webpack配置文件,共同组成一份新的,完整的,符合环境的webpack配置文件。这个需要webpack-merge的帮助。执行命令:npm install webpack-merge安装好webpack-merge。
在build文件夹新建名为webpack.config.base.js的文件,里面是公共的webpack配置,无论是什么环境:

在build文件夹新建名为webpack.config.client.js的文件,里面是客户端的webpack配置:

因为路径改变,需要修改一下package.json里的脚本启动命令:

最后运行npm run dev npm run build,没问题就好了。

vue-loader配置

在build文件夹新建文件vue-loader.config.js:

在公共配置webpack.config.base.js:

打包前清空打包输出的目录

这个需要借助rimraf,执行命令:
npm install rimraf安装rimraf,并在package.json的脚本标签配置一下:

vue-loader的cssModule配置

在vue-loader.config.js文件中:

在每个vue组件的style加上module,表示这个style是使用CSSModule处理的:

在webpack配置文件,配置使用CSSModule

安装eslint规范代码写作,editorconfig统一编辑器规范,precommit代码不规范不许git提交

eslint

执行命令:
npm install eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
安装eslint以及其依赖,这里的规范使用eslint提供的标准规则,也可以使用其他的规范,可以更改。
eslint检测vue下的js代码,需要借助eslint-plugin-html,才能检测到vue的js代码。执行命令:npm install eslint-plugin-html,安装插件。
安装完成后,在项目根目录创建名为:.eslintrc,作为eslint的配置文件:

在package.json使用eslint:

执行命令:npm run lint,就会检测代码的编写规范,你会发现有很多规范上的错误,eslint提供自动修复功能:

执行命令:npm run lint-fix,代码的错误的编写会被自动修复。

使用eslint实时检测代码规范

这个需要安装一些插件依赖,执行命令:npm install eslint-loader babel-eslint,安装完后,先打开.eslintrc,配置一下:

在webpack.config.base.js中配置:

eslint到此告一段落。

editorconfig

editorconfig是用来规范编辑器的配置的。
在项目根目录下创建文件:.editorconfig

注意:这个需要编辑器的支持,如果不支持,可能需要安装对应的编辑器的插件。

precommit

如果,代码不符合规范,就不允许提交到git上面去,这要借助husky,执行命令:npm install husky安装,再去package.json配置脚本:

最后,执行命令:git commit -m "项目名",如果代码有错,是不能提交的。
注意:项目必须有git目录,也就是项目已经git初始化过,否则husky会报错。

最后

这是基于webpack3写的,现在默认都是webpack4,还有,可能写的不好,这里有些别人写的webpack4的文章:
webpack4+vue打包简单入门
【webpack】webpack-dev-server生猛上手——让我们来搭一个webpack的微服务器吧!
webpack从零开始第1课:安装webpack和webpack-dev-server
深入浅出的webpack构建工具—webpack基本配置(一)
以下是这次webpack3依赖的版本:

css热更新

要实现css热更新,使用的处理器是vue-style-loader,而不是style-loader。


文章 vue下了解webpack配置 转载需要注明出处
喜欢 (0)

您必须 登录 才能发表评论!