如何用webpack4带你实现一个vue的打包的项目

一个用webpack4打包的vue 的项目，参照vue-cli的webpack配置，

一步一步带你实现一个vue的打包的项目，每一个commit对应一个步骤。

github 地址

clone project

git clone git@github.com:naihe138/nvue.git

install

npm install or yarn

一、初始化项目

初始化项目，用vue-loader来打包.vue文件，html-webpack-plugin插件来导出html文件。

第一步我们很简单，就利用vue-loader 和 babel-loader 是把.vue文件打包出来，总共才40多行代码，看build/webpack.base.conf.js文件注释就看的懂。+++表示有省略的代码

module.exports = {
 +++
 // 模块，loader
 module: {
  rules: [
   {
    test: /.vue$/,
    loader: 'vue-loader',
    exclude: /node_modules/,
    include: resolve('src')
   },
   {
    test: /.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    include: resolve('src')
   }
  ] }
 +++
}

运行

webpack --config build/webpack.base.conf.js

二、打包css和图片等资源

这里打包css以sass 为例，用到了

mini-css-extract-plugin

url-loader

+++
module.exports = {
 +++
 // 模块，loader
 module: {
  rules: [
   +++
   {
    test: /.s?css$/,
    use: [
     MiniCssExtractPlugin.loader,
     'css-loader',
     'sass-loader'
    ]   },
   {
    test: /.(png|jpe?g|gif|svg)(?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: 'static/img/[name].[hash:7].[ext]'
    }
   }
   +++
  ] },
 // 插件
 plugins: [
  +++
  new MiniCssExtractPlugin({
   filename: 'static/css/[name].[hash].css',
   chunkFilename: 'static/css/[name].[hash].css'
  })
 ]}

运行

webpack --config build/webpack.base.conf.js

三、配置热加载、代理等开发环境

通过build/config.js来设置开发配置。如下注释

const path = require('path')
module.exports = {
 dev: {
  assetsSubDirectory: 'static', // 静态文件目录
  assetsPublicPath: '/', // 相对文件路径
  proxyTable: {},
  host: 'localhost',
  port: '8000',
  autoOpenBrowser: false, // 是否自动打开浏览器
  errorOverlay: true, // 浏览器错误提示遮罩层								 
 1/3    1 2 3 下一页 尾页