从零开始基于Vue的Webpack4及babel7配置-CSDN博客

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

1.目录结构

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')
复制代码

修改 script 的 dev 命令

"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/core：babel核心api
@babel/preset-env：preset 集合，将基于你的实际浏览器及运行环境，自动的确定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` 文件中的 `<style>` 块
{
  test: /\.css$/,
  use: [
    'vue-style-loader',
    'css-loader',
    'less-loader'
  ]
},
复制代码

至此我们就可以在页面中看到vue的模板页面了

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
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: '/'
  },
  resolve: {
    alias: {
      '@': path.join(__dirname, '..', 'src')
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/, // 被 test 匹配的文件都会被 babel 编译
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      // 它会应用到普通的 `.css` 文件
      // 以及 `.vue` 文件中的 `<style>` 块
      {
        test: /\.less$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url-loader',
        options: {
          limit: 1000,
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}
复制代码

5. webpack 相关插件

5.1 clean-webpack-plugin

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

const CleanWebpackPlugin = require('clean-webpack-plugin')
...
new CleanWebpackPlugin(['dist'], {
  root: path.resolve(__dirname, '../')
})
复制代码

5.2 mini-css-extract-plugin

默认情况下css样式会内联在js中, 使用mini-css-extract-plugin可提取css文件到单独的文件, 最好只在生产环境下使用，以便于热重载

npm install -D mini-css-extract-plugin
复制代码

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
new MiniCssExtractPlugin({
  filename: '[name].[hash].css',
  chunkFilename: '[id].[hash].css'
})
复制代码

5.3 PostCSS

这里我只使用了autoprefixer, autoprefixer可以自动帮你添加浏览器前缀

npm i autoprefixer postcss-loader -D
复制代码

修改webpack, 注意loader的顺序

{
    test: /\.less$/,
    use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'less-loader',
        'postcss-loader'
    ]
},
复制代码