从零开始基于Vue的Webpack4及babel7配置

借着最近终于将项目各依赖升级至最新的机会,记录一下新版webpack和babel的配置,后续还会记录一下我再生产环境所做的优化以及基于gitlab的CI、CD配置。

1.目录结构

github.com/lixianfeng1…

2.webpack 配置

2.1 安装依赖

npm i webpack webpack-cli -D
touch build/webpack.config.js
复制代码

package.json 中添加 script 命令

"scripts": {
  "dev": "webpack --config build/webpack.config.js --mode development"
}
复制代码

2.2 配置 webpack.config.js

const path = require('path');

module.exports = {
  context: path.resolve(__dirname, '../'), // 将 entry 的根路口指向 context 配置的文件夹
  entry: {
    app: './src/main.js'
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].[hash].js',
    publicPath: '/'
  }
}
复制代码

接着我们执行npm run dev就可以在dist文件夹中看到打包后的结果

2.3 在 HTML 文件引入 bundle

由于打包后的文件是带哈希的,我们需要动态的将打包后的文件注入 HTML,这里我们使用 html-webpack-plugin

npm i html-webpack-plugin -D
复制代码

修改 webpack.config.js 配置

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

module.exports = {
  context: path.resolve(__dirname, '../'), // 将 entry 的根路口指向 context 配置的文件夹
  entry: {
    app: './src/main.js'
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].[hash].js',
    publicPath: '/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}
复制代码

在开发环境下使用 webpack-dev-server 实时预览和热更新

npm i webpack-dev-server -D
复制代码

src/main.js 下添加一行代码

console.log('Hello world')
复制代码

修改 scriptdev 命令

"dev": "webpack-dev-server --config build/webpack.config.js --mode development"
复制代码

再执行一次 npm run dev,我们就可以在默认的 8081 下看到控制台的输出

3. bebel 配置

现在项目大多是基于es6写的,但是并不是所有浏览器都支持,就需要babel以及各种插件来将es6转换成浏览器支持的代码

npm i @babel/core @babel/preset-env babel-loader -D
复制代码
  • @babel/corebabel核心api
  • @babel/preset-envpreset 集合,将基于你的实际浏览器及运行环境,自动的确定babel插件及polyfill
touch .babelrc
复制代码
{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }]
  ]
}
复制代码

修改 webpack配置

module: {
  rules: [
    {
      test: /\.js$/, // 被 test 匹配的文件都会被 babel 编译
      loader: 'babel-loader',
      exclude: /node_modules/
    },
  ]
},
复制代码

4. 编写 Vue 代码

这里我使用vue-cli 3.0的模板代码作为示例

4.1 安装依赖

npm i vue vue-router -S
npm i vue-loader vue-template-compiler -D
复制代码

vue-load具体的配置可以看这里

4.2 处理静态资源

npm i url-loader file-loader -D
复制代码
{
  test: /\.(png|jpg|gif|svg)$/, // 如果有字体或者视频文件同理
  loader: 'url-loader',
  options: {
    limit: 10000, // 根据需求自行填写
    name: '[name].[ext]?[hash]'
  }
}
复制代码

url-loader依赖file-loader,支持设置图片大小限制,当图片超过限制时,等同于file-loader,而当图片不超过限制时,则会将图片以base64的形式打包进css文件,以减少请求次数。

4.2 处理样式

我使用了less, 如果不需要可以忽略

npm i less less-loader css-loader -D 
复制代码
// 它会应用到普通的 `.css` 文件
// 以及 `.vue` 文件中的 `