打包的时候每次都在cli下写一大堆代码，特别不方便，我们可以使用webpack.conf.js的配置文件来简化打包代码，webpack.conf.js默认保存在项目根目录下，然后在根目录下执行webpack命令，webpack就会自动根据webpack.conf.js的配置进行打包，接下来在根目录新建一个webpack.config.js，内容如下

module.exports = {
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: {
                  loader: 'vue-loader'
                }
            }
        ]
    },
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.js'
        }
    }
}

然后执行如下命令打包成功！此时打包出来的main.js大小为341kb（包含vue.js的代码）

引入elementui样式

接下来我们再引入elementui样式首先安装element执行npm install --save element-ui 然后src/index.js改为如下代码

import Vue from 'vue'
import App from './app.vue'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

src/app.vue里面随便加一个elementui按钮的代码如下 <el-button type="success" icon="el-icon-check" circle></el-button> 接着打包会发现报错。。。

css-loader和style-loader

因为在这里我们用import引入了css文件，所以我们要配置解析css的两个loader css-loader和style-loader，css-loader是解析引入的css文件用的，style-loader是把解析后的css样式以的形式插入到页面上去的，因此这两个的摆放顺序不能颠倒，webpack是从右向左执行的所以应该把css-loader放后面，我们先安装 npm i -D style-loader css-loader，然后webpack.config.js加入如下的loader解析

{
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
}

接着打包，依然报错如下仔细看这是因为css中引用的矢量字体导致，我们还要安装解释字体的loader

url-loader和file-loader

处理图片和字体等资源有两种loader，url-loader和file-loader，二者关系是url-loader包含file-loader，使用file-loader会把文件单独打包出来脱离js文件，url-loader有个limit参数，小于limit的时候会直接把静态资源也打包进js文件中，大于limit的时候就调用file-loader单独打包出来。我们先用url-loader测试还是先安装 npm i -D url-loader webpack.config.js配置文件中加入如下代码

{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    use: {
        loader: 'url-loader',
     }
}

打包成功我们发现main.js有2062kb，打开main.js我们会发现，elementui的所有css代码和字体图标都打包到了main.js文件中了

hxkuc / webpack

webpack4使用之路--使用webpack.conf.js配置文件 #3

引入elementui样式

css-loader和style-loader

url-loader和file-loader