关于使用vue开发webpack.config.js配置问题。

最近学习vue,并想用vue开发项目，既然如此肯定抛不开webpack的使用，虽然vue已经提供了vue-cli脚手架，但是不妨自己配置一下，加深理解，本文发布主要方便自己记忆。只有写下了的才能更好记忆。 首先，安装webpack，个人建议全局安装,当然电脑中必须安装过node

  npm i webpack --global //然而webpack4出来后，这样安装的webpack使用起来会报错，会叫你安装webpack-cli
  //这是因为webpack4版本的相关命令都在webpack-cli中，可以这样使用
  npm i webpack-cli --global  //安装,注意的是，如果本地安装webpack-cli，使用的时候，要进入webpack目录下
复制代码

这个时候已经是可以使用webpack4进行打包了，但是现在只可以打包js文件。webpack4对打包命令有更加严格的要求，之前的命令webpack main.js bundle.js也是不可用的。

npx webpack main.js -o bundle.js --mode development
复制代码

这里不对webpack进行更多介绍，显然上面的命令是很麻烦的 首先可以配置package.json文件中scripts配置添加"build","webpack",算是约定俗成的规范，之后打包编译可以通过运行npm run build进行编译，当然现在还不可用。说了这么多终于到webpack.config.js的配置了。 在根目录创文文件webpack.config.js。添加如下代码：

const path = require('path')  根目录路径
module.exports = {
 entry:'./src/index.js',   //打包的入口文件
 output:{
   path:path.resolve(__dirname,'dist'),    //出口文件路径
   filename:'bundle.js'                    //出口文件名字
 },
  mode:'development'                     //环境为开发环境
}
复制代码

这时可以执行npm run build命令进行打包了，当然只能打包js文件，可实际开发不可能只用js，那么css和图片怎么进行打包呢，这要借助于加载器插件了，也就是loader

npm i css-loader style-loader file-loader --save-dev
复制代码

webpack.config.js中进行如下配置：

   module: {
   rules: [
     {
       test: /.css$/,
       use: [
         // 注意：顺序上不能改动
         'style-loader',
         'css-loader'
       ]
     }，
    {
       test:/.(jpg|png|jpeg|svg|gif)$/,
       use:[
         "file-loader"
       ]
    } 
   ]
 }
复制代码

这样就可以对图片和css进行打包了，注意：图片打包，会形成新的路径，所以打包后的index.html是找不到图片的。这时候我们要把index.html文件也同样打包进去。

npm i html-webpack-plugin --save-dev //打包html用的插件
复制代码

当然webpack.config.js要加入plugin配置

plugins: [
// 该插件的所用就是把 index.html 打包到你的 bundle.js 文件所属目录
new htmlWebpackPlugin({
  template: './index.html'
})
]
复制代码

现在路径问题也解决了，接下来让我们让webpack可以支持.vue文件,步骤比较类似

npm i vue-loader vue-templete-compiler
复制代码

webpack.config.js中加入

{
      test: /.vue$/,
      use: [
        'vue-loader'
      ]
    }
}
复制代码

.vue文件也可以打包了。在这里基本的webpack.config.js打包的配置已经完成了，不过为了方便开发，并且更多的兼容。实际开发中我们还要用到babel编译，

npm install --save-dev babel-loader babel-core babel-preset-env
复制代码

webpack.config.js中添加

 {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/, // 不转换 node_modules 中的文件模块
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env'],
          cacheDirectory:true,//缓存编译，可以增加编译速度
        }
      }
    }
复制代码

babel值转换语法，API的转换，我们要用babel-polyfill

npm i --save-dev babel-polyfill

复制代码

配置上要改变webpack.config.js中的entry

entry: ['babel-polyfill', './src/main.js']
复制代码

babel会给没给模块添加工具函数。这样会造成代码的重复，所以通过babel-transform-runtime解决

npm install babel-plugin-transform-runtime --save-dev
npm install babel-runtime --save
复制代码

webpack.config.js中配置

 {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env'],
           // 默认把打包的结果缓存到 node_modules/.cache 模板
          cacheDirectory: true,
          plugins: ['transform-runtime'] //加上这一行
        }
      }
    }
复制代码

为了方便开发，我们还可以引入插件webpack-dev-server

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

配置根目录

devServer: {
  // 配置 webpack-dev-server 的 www 目录
  contentBase: './dist'
},
复制代码

配置npm script

"scripts": {
  "build": "webpack",
  "watch-build": "webpack --watch",
  "dev": "webpack-dev-server --open"
},
复制代码

接下来就可以通过

npm run dev
复制代码

来启动项目了。不过现在还做不到热更新，如果想热更新只需在webpack.config.js配置中添加

const webpack = require('webpack')
//配置中加入下面两个对象
plugins:[
     new webpack.NamedModulesPlugin(),
     new webpack.HotModuleReplacementPlugin()
]
//并设置热更新为true
devServer:[
  hot:true
]
复制代码

补充一点，有些外部引用的代码实际上并不需要打包，以jquery为例：

 externals:[
 //key 就是包名
 //value是全局的接口
   jquery:'jQuery'
 ]
复制代码

这样就可以过滤掉jquery。

最后补上完整的配置代码

const path = require('path')
const HtmlWebpackPlugin =  require('html-webpack-plugin')
const webpack = require('webpack')
module.exports = {
entry:['babel-polyfill','./src/index.js'],
output:{
  path:path.resolve(__dirname,'dist'),
  filename:'bundle.js'
},
mode:'development',
//第三方资源不进行打包
externals:[
//key 就是包名
//value是全局的接口
   // jquery:'jQuery'
],
module:{
    rules:[
        {
          test:/\.css$/,
          use:[
              'style-loader',
              'css-loader'
          ]
        },
        {
          test: /\.less$/,
          use: [{
              loader: "style-loader" // creates style nodes from JS strings
          }, {
              loader: "css-loader" // translates CSS into CommonJS
          }, {
              loader: "less-loader" // compiles Less to CSS
          }
        ]
      },
      {
        test:/\.(jpg|png|jpeg|svg|gif)$/,
        use:[{
          loader:"file-loader"
        }]
      },
       {
        test: /\.js$/,
         exclude: /(node_modules|bower_components)/,
          use: {
              loader: 'babel-loader',
          options: {
            cacheDirectory:true,
            presets: ['env'],
            plugins:['transform-runtime']
         }
        }
      },
      {
        test:/\.vue$/,
        use:[
          'vue-loader'
        ]
      }
  ]
},
plugins:[
//打包后图片路径改变，需要打包html
   new HtmlWebpackPlugin(),
//热更新
   new webpack.NamedModulesPlugin(),
   new webpack.HotModuleReplacementPlugin()
],
devServer:{
  // 配置webpack-dev-server的www目录
  contentBase: './',
//热更新
  hot:true
}
}
复制代码

转载于:https://juejin.im/post/5afba4def265da0b79650e5a