基于Vue CLI 3的webpack配置简解
发布日期:2021-09-12 09:57:47 浏览次数:16 分类:技术文章

本文共 6277 字,大约阅读时间需要 20 分钟。

    最近在学习写TypeScript时,tsc编译后ts文件老是报变量占用的错误,后来配置tsconfig.js编译到不同的目录可以了,但是每次更改都要手动编译好麻烦,就想自己配置一个webpack开发环境,之前用脚手架都不清楚具体配置,参考Vue脚手架配置,这篇博文也是基于Vue的配置总结。

npm命令

    回忆一下我们在使用webpack的时候,打包的时候一般命令都是 webpack ... 或者是 webpack-dev-server ... 来打包资源,我们在使用Vue脚手架的时候一般使用两个命令,一个是 npm run dev,一个是 npm run build。先来说 npm run命令是个什么东西,每当我们执行npm run命令的时候,就会新建一个shell,他会将当前目录node_modules/.bin加入path变量中,那在package.json中使用scripts来定义脚本,来看一下Vue是怎么配置dev和build的

"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js,
"start": "npm run dev",
"build": "node build/build.js"  },

我们在运行npm run dev的时候,可以理解新建shell然后执行了webpack-dev-server *** 命令,关于后边的配置项后面再说。我们看到start中配置了的npm run dev,因为npm run start可以简写成 npm start比较简洁,那我们就可以知道

npm run dev = npm start = npm run start = webapck-dev-server  --inline --progress --config build/webpack.dev.conf.js

那么npm run build应该更好理解了,就是执行了 node build/build.js,关于build.js里面做了什么后边再说。想要更详细了解npm可以点击。

webpack的配置文件

    webpack有两种使用方式,终端或Node.js,无论那种方式都需要传递一个配置对象(configuration object),很好的是Vue CLI两种方式都用了,首先来看dev模式下的配置文件。

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0"

     webpack-dev-server是在开发过程中使用的,不仅可以启动服务供你访问页面,还能进行模块热替换,本篇只讨论简单配置,因为复杂的我也需学习。对于dev-server有很多选项能控制其行为,一种方式是在命令行后,如上面的--inline、--progress,另一种方式就是在配置文件中体现,关于更多配置项有兴趣请点击。我们自己搭建webpack的时候知道,配置项默认是webpack.config.js,那在dev命令行中 --config的作用是更改了默认配置文件,为当前目录下build/webpack.dev.conf.js。在我们自动搭建的项目中,大家都会看到以下目录

大致先说一下build下每个文件,上文我们说过npm run build就是执行了 node build/build.js,所以我们在输出代码时候执行的就是上图中的build.js文件,webpack.base.conf.js如其名他就是一个基础配置文件,根据用户使用条件不同又加了两个webpack.dev.conf.js开发时的配置文件和webpack.prod.conf.js可以理解成生产配置文件。先说开发中的webpack.base.conf.js

//webpack.base.conf.js 省略的很多配置内容module.exports = {  context: path.resolve(__dirname, '../'),  entry: {
app: './src/main.js'  },  output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
  ? config.build.assetsPublicPath
  : config.dev.assetsPublicPath  },  resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src'),
}  },  module: {
rules: [...]
   },  node: {
...  },};

可以看到基础项里面就是我们自己搭建时候写的入口、出口、loader、插件等基础项,

//由于不想篇幅过长,省略了很多不相关的代码...const config = require('../config')const merge = require('webpack-merge')...//引入了base.conf文件 const baseWebpackConfig = require('./webpack.base.conf')const HtmlWebpackPlugin = require('html-webpack-plugin')...//看到merge就知道是将后边的配置项和基准baseWebpackConfig合并const devWebpackConfig = merge(baseWebpackConfig, {  ...  devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
  rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
  ],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
  ? { warnings: false, errors: true }
  : false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
  poll: config.dev.poll,
}  },  plugins: [
...
//使用webpack-dev-server的主要插件
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
...
new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true
}),
// copy custom static assets
new CopyWebpackPlugin([
  {
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
  }
])  ]})

在dev.conf.js中加入了很多webpack-dev-server的配置项,可以看到最开始引入了const config = require('../config') ,我们可以看到在build同级目录下存在一个config(可在上截图中看到),在dev配置文件中引入了这个文件夹,那我们打开它下边的index.js

module.exports = {  dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
  '/api': {  //代理地址
target: 'http://**.110.130.**:8000',  //需要代理的地址
changeOrigin: true,  //是否跨域
secure: false,
pathRewrite: {
  '^/api': ''
}
  }},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080,
 autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
cacheBusting: true,
cssSourceMap: true  },  build: {
...  }}

可以看到目录下又dev和build两个选项,那我们在webpack.dev.conf.js中可以看到

host: HOST || config.dev.host,port: PORT || config.dev.port,

也就是说,在HOST和PORT没有设置的情况下,回去config.dev下取,这也是为什么我们开发中如果需要更改端口,需要更改config/index.js中dev下的host和port,对于各个配置项的作用还是建议大家取webpack官网上看一下。写写感觉篇幅有点长了,在简单说一下build的,其实原理和开发一下,只不过有些配置选项更改了,感觉还要写一个解析配置项的文章?,我们已经知道了npm run build执行的是 node build/build.js 我们先来看一下build.js文件

'use strict'require('./check-versions')()process.env.NODE_ENV = 'production'const ora = require('ora')const rm = require('rimraf')const path = require('path')const chalk = require('chalk')const webpack = require('webpack')const config = require('../config')const webpackConfig = require('./webpack.prod.conf')const spinner = ora('building for production...')spinner.start()rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {  if (err) throw err  webpack(webpackConfig, (err, stats) => {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
  colors: true,
  modules: false,
  children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
  chunks: false,
  chunkModules: false
}) + '\n\n')
if (stats.hasErrors()) {
  console.log(chalk.red('  Build failed with errors.\n'))
  process.exit(1)
}
console.log(chalk.cyan('  Build complete.\n'))
console.log(chalk.yellow(
  '  Tip: built files are meant to be served over an HTTP server.\n' +
  '  Opening index.html over file:// won\'t work.\n'
))  })})

这个就直接全粘过来了,之前我们提到过,wenpack又两种执行方式,对于dev来说是执行了shell命令,那对于build来说是执行了node的一种方式

const webpack = require("webpack");webpack({  // 配置对象}, (err, stats) => {  if (err || stats.hasErrors()) {
// 在这里处理错误  }  // 处理完成});

build,js中webpack传入了webpackConfig = require('./webpack.prod.conf'),那么它的配置就是base+prod的merge,通过node的内置对象process将结果输出到控制台,关于配置文件中插件和配置项的作用,如果有机会在进行深入的解读,希望这篇文章对你有所帮助。

   在补充一点,不同于webapck会输出可见的文件,webpack-dev-server输出的文件并不可见,江湖传言是在内存当中,编译后的bundle.js你可以通过localhost:8080/bundle.js看到,最好的方式是引入HtmlWebpackPlugin插件,这样你编译后bundle.js就会插入到你的script标签中。我觉得个人对webpack还是只停留在使用阶段,本来标题是详解,后来想想还是改成简解(简单解释?)期望能研究一下更深入有意思对项目有帮助的东西。

转载地址:https://blog.csdn.net/weixin_38361925/article/details/87779410 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:JS数组去重filter、reduce
下一篇:研究MouseEvent中的clientX、offsetX、pageX、screenX

发表评论

最新留言

感谢大佬
[***.191.171.45]2022年10月07日 01时28分14秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

最新文章