webpack4.0+vue+es6配置
栏目: JavaScript · 发布时间: 5年前
内容简介:上一篇webpack入门文章中,我们学会了怎么使用webpack搭建一个前端工程,了解了webpack的一些核心概念。但是webpack的功力远不止如此,在本文中,我们将学习如何使用webpack来做更多的事情,如何进行环境分离,如何配置es6,再配置vue,使用vue来进行开发。这篇文章是入门文章的延续,所以demo也延续入门文章的demo。开发与生产环境的分离
用webpack4.0做更多事情
上一篇webpack入门文章中,我们学会了怎么使用webpack搭建一个前端工程,了解了webpack的一些核心概念。但是webpack的功力远不止如此,在本文中,我们将学习如何使用webpack来做更多的事情,如何进行环境分离,如何配置es6,再配置vue,使用vue来进行开发。
这篇文章是入门文章的延续,所以demo也延续入门文章的demo。
开发与生产环境的分离
在实际开发中,会有许多环境,有 开发环境,生产环境,测试环境,预发环境....(因公司而异)。最常见的两种是开发环境和生产环境。在不同的环境会有很多不同的配置。所以我们需要把不同环境的配置文件从 webpack.config.js
文件中分离出来。
首先进行目录的改造。首先安装依赖,用于融合配置文件。
npm install -D webpack-merge 复制代码
webpack-demo |- config |- webpack.base.js |- webpack.dev.js |- webpack.pro.js |- package.json |- src |- 略 复制代码
webpack.base.js
const path = require("path"); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { index: path.resolve(__dirname,'./src/index.js'), }, output: { filename: '[name].[hash].js', path: path.resolve(__dirname,'../dist'), }, module: { rules:[ { test: /\.css$/, use: [ "style-loader", "css-loader" ] },{ test: /\.(png|svg|jpg|gif)$/, use:{ loader:'url-loader', options: { limit: 8192, name: 'images/[name].[ext]?[hash]' } } } ] }, plugins:[ new HtmlWebpackPlugin({ title:'WebpackTest' }) ] } 复制代码
output文件名修改:我们需要对output的filename选项进行修改。在用户访问网页之后,会加载dist包中的bundle.js,并且进行缓存。在我们进行版本更新以后,如果加载文件名还是bundle.js的话。浏览器不会拉去新的bundle.js资源,会直接使用浏览器缓存的资源。所以我们需要将每次打包后的资源名都命名不同。 [name].[hash].js
会根据文件内容给每个文件名加上唯一的哈希,这样就不会出现重名文件了。
开发环境(dev)
webpack.dev.js
const merge = require("webpack-merge"); const base = require("./webpack.base"); const webpack = require("webpack"); module.exports = merge(base ,{ mode: 'development', devtool: 'source-map', devServer:{ compress: true, //启用压缩 port: 1207, //端口 open: false, //自动打开浏览器 hot: true }, plugins:[ new webpack.HotModuleReplacementPlugin() ] }) 复制代码
首先介绍一下开发环境下我们需要进行配置的几点
- source-map :source-map在开发中的用处很大,在浏览器允许的代码是经过编译以后的代码,在出现一些错误的时候,如果不使用source-map的时候,错误无法定位到源代码中。使用了source-map以后,可以直接定位到错误出现的行。配置source-map只需要将devtool属性配置为source-map就可以。
- devserver配置 :devserver属性可以对开发环境选项进行一些配置,比如:自动打开浏览器,服务端口号,热更替,是否压缩等。
- 模块热更替(HotModuleReplacementPlugin) : 模块热更替允许在更新各种模块的时候,无需完全刷新页面,这个功能在开发环境中非常实用。最简单的应用场景,你在写一些样式的时候,需要自己配置一些数据上去,这时候你需要调整字体大小。使用了模块热更替之后会页面不用刷新就可以看到效果,省去了重新配置数据。在开启热更替时,还需要对模块热更替插件进行配置,否则会报错。
生产环境(pro)
const merge = require('webpack-merge'); const base = require("./webpack.base.js"); const CleanWebpackPlugin = require('clean-webpack-plugin'); const path = require("path"); module.exports = merge(base ,{ mode: 'production', plugins: [ new CleanWebpackPlugin(['dist'],{ root: path.resolve(__dirname,'../'), }) ], }) 复制代码
- clean-webpack-plugin:用于删除文件,在每次打包时,dist文件夹都会出现新的文件,如果不进行删除处理的话,会一直累加到dist文件夹里面。所以这里使用clean-webpack-plugin插件,每次打包的时候都会先删除之前的dist文件。
模式(mode)
在入门篇中,我们每次编译后都会出现 he 'mode' option has not been set
的警告。这是webpack4新增的mode属性,有两种mode,development和production.
-
development模式:
process.env.NODE_ENV
-
production模式:
process.env.NODE_ENV
process.env.NODE_ENV
值用于再开发中进行环境判断。
package.json
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --config config/webpack.dev.js", "build": "webpack --config config/webpack.pro.js" }, 复制代码
再对npm script进行修改,指定对应配置文件。
es6配置
下面我们进行es6的配置,由于es6未被所有浏览器全面支持,所有我们在使用的时候还想需要将其转换为es5.主要用到的 工具 是babel,先进行babel依赖的安装。
npm i -D @babel/core @babel/plugin-transform-runtime @babel/preset-env babel-loader 复制代码
webpack.base.js
...略 module:{ rulse:[ ...略 { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, } ] } 复制代码
配置loader,这里的exclde选项用于忽略一些文件(敲黑板),减少webpack的处理量。/node_modules/都是已经转好的文件。
新增.babelrc文件
webpack-demo |- config |- 略 |- package.json |- src |- 略 |- .babelrc 复制代码
{ "presets": ["@babel/preset-env"], "plugins": ["@babel/plugin-transform-runtime"] } 复制代码
-
presets(设定转码规则):过去需要进行规则集指定,现在使用
@babel/preset-env
搭配@babel/core
解决 -
plugins(插件):
transform-runtime
插件表示不管浏览器是否支持ES6,只要是ES6的语法,它都会进行转码成ES5
resolve
这些选项能设置模块如何被解析。在vue开发中通常使用的 @/xxx/xxx
就是将@符号配置为src目录。这样webpack就能快速的找到该路径,这样的配置不仅可以方便开发,而且可以优化构建时间,减轻webpack的工作量。另外还可以配置后缀名的自动补全。
resolve: { extensions: [ '.js', '.vue', '.scss', '.css'], //后缀名自动补全 alias: { //别名 '@': path.resolve(__dirname, '../src'), } }, 复制代码
vue配置
最后我们进行vue的配置,先安装依赖。
npm i -D vue vue-loader vue-style-loader vue-template-compiler 复制代码
- vue-loader是vue的loader,vue文件是一个SFC类文件,vue-loader会将其解析成为三部分,template部分用于渲染视图,js,style。
- vue-style-loader用于处理vue-loader解析后的style.
- vue-template-compiler用于处理解析解析后的template.
先进行目录改造
webpack-demo |- config |- 略 |- package.json |- src |- components |- HelloWorld.vue |- views |- App.vue |- asset |- img.png |- style.css |- index.html |- index.js |- .babelrc |- package.json 复制代码
webpack.base.js
const path = require("path"); const HtmlWebpackPlugin = require('html-webpack-plugin'); const VueLoaderPlugin = require('vue-loader/lib/plugin') const ProgressBarPlugin = require('progress-bar-webpack-plugin'); module.exports = { ...略 module:{ rules:[ { test: /\.css$/, use: [ "style-loader", "vue-style-loader", "css-loader" ] },{ test: /\.(png|svg|jpg|gif)$/, use:'url-loader', },{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, },{ test:/\.vue$/, use: 'vue-loader' } ] }, plugins:[ new VueLoaderPlugin(), new HtmlWebpackPlugin({ filename: './index.html', //文件名 template: './src/index.html', //模板文件 }) ] } 复制代码
在这里我们还需要安装VueLoaderPlugin(),并且需要进行HtmlWebpackPlugin的重新配置,我们需要使用自己的template,因为必须创建一个div入口,将vue实例挂载在这上面。按原来方式使用该插件的话,无法创建div入口。
index.html
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>webpackStudy</title> </head> <body> <div id="root"></div> </body> </html> 复制代码
index.js
import Vue from 'vue' import App from './views/APP' import '@/asset/style' new Vue({ el:'#root', render: h => h(App) }) 复制代码
HelloWorld.vue
<template> <div> <img src="../asset/img.png" alt=""> <p>一起学习前端吧</p> </div> </template> <script> export default { } </script> <style scoped> p{ font-size: 50px; } </style> 复制代码
App.vue
<template> <div id="app"> <hello-world></hello-world> </div> </template> <script> import HelloWorld from '@/components/HelloWorld' export default { name: "App", components: { HelloWorld } }; </script> 复制代码
- index.js依旧是我们的webpack入口文件,我们将css文件和APP.vue入口文件引入,进行vue实例化,挂载在root节点上(index.html文件的root节点)。
- 然后就可以开始组件开发啦。
附加
安装一个 ProgressBarPlugin
来查看打包进度.
npm i -D progress-bar-webpack-plugin 复制代码
plugins:[ new ProgressBarPlugin()//打包进度条 ] 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 6、如何获取配置中心的配置
- React降级配置及Ant Design配置
- vscode 配置eslint 开发vue的相关配置
- git commit 规范校验配置和版本发布配置
- hadoop地址配置、内存配置、守护进程设置、环境设置
- 在hibernate中配置事务级别与命名查询配置【原创】
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
零成本实现Web性能测试
温素剑 / 电子工业出版社 / 2012-2 / 59.00元
《零成本实现Web性能测试:基于Apache JMeter》是一本关于Web性能测试的实战书籍,读者朋友们在认真阅读完《零成本实现Web性能测试:基于Apache JMeter》后,相信能够将所学知识应用到生产实践中。《零成本实现Web性能测试:基于Apache JMeter》首先介绍基础的性能测试理论,接着详细介绍如何使用JMeter完成各种类型的性能测试。实战章节中作者以测试某大型保险公司电话......一起来看看 《零成本实现Web性能测试》 这本书的介绍吧!