搭建基础webpack+vue(四)

第六步 ： 引入图片资源

把图片也当成模块引入

npm i file-loader --save-dev

webpack.config.js添加一个loader

{
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader',
    options: {
        name: '[name].[ext]?[hash]',
        esModule: false
    }
}

第七步：单文件组件

npm i vue-loader vue-template-compiler --save-dev

webpack.config.js声明VueLoaderPlugin

var VueLoaderPlugin = require('vue-loader/lib/plugin');
plugins: [
    new VueLoaderPlugin()
]

webpack.config.js添加一个loader

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
        loaders: {
            'scss': [
                'vue-style-loader',
                'css-loader',
                'sass-loader'
            ],
            'sass': [
                'vue-style-loader',
                'css-loader',
                'sass-loader?indentedSyntax'
            ]
        }
    }
}

第八步 source-map

在开发阶段，调试也是非常重要的一项需求。
App.vue：

created() {
    this.fetchData();
    console.log('23333');
}

调试后台看见的console是打包之后的地址，方便调试,我们修改webpack.config.js

module.exports = {
    entry: ['babel-polyfill', './src/main.js'],
    // 省略其他...

    devtool: '#eval-source-map'
};

第九步 打包发布

我们先试着yarn run build打包一下文件

会发现，打包后的build.js非常大，有1M多 并且提示了 [big]

package.json

"scripts": {
    "build": "webpack --mode development"
},

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    // 省略...
    optimization: {
        splitChunks: {
         chunks: 'all'
         }
     }
  }

再次打包，压缩效果非常明显