webpack打包工具入门-小羽的知识库

简介

webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用

快速入门

这里已经介绍得非常详细了，我就不再废话。

在vue项目中使用

如果在已经成型的vue项目中，package.json构建时使用vue-cli-service build，那么我们重新使用webpack打包会有一些坑。(我在试图进行vue ssr时碰到了这个问题)

`vue-style-loader`不要忘记

在一些教程文章上对vue文件的rules只有vue-loader, 如果vue文件中嵌入了<style>标签，就会报错。

修改vue的rules如下：

{
    test: /\.vue$/,
    loader: 'vue-loader!vue-style-loader',
}

`.js`文件要用`babel`

 {
                test: /\.js$/,
                loader: 'babel-loader',
                include: path.join(projectRoot, 'src'),
                exclude: /node_modules/,
                options: {
                    presets: ['@vue/babel-preset-app']
                }
            }

样式文件各不相同

{
    test: /\.less$/,
        loader: "style-loader!css-loader!less-loader"
},
{
        test: /\.css$/,
        loader: "style-loader!css-loader"
},
{
         test: /\.scss$/,
         loader: "style-loader!css-loader!sass-loader"
}

其他如图片文件、字体文件配置见完整的配置文件。

一个完整的webpack.config.js如下：

const path = require('path');
const projectRoot = path.resolve(__dirname, '.');
const { VueLoaderPlugin } = require('vue-loader')


module.exports = {
    // 此处告知 server bundle 使用 Node 风格导出模块(Node-style exports)
    target: 'node',
    mode:'production',
    entry: path.join(projectRoot, 'src/entry-server.js'),
    output: {
        libraryTarget: 'commonjs2',
        path: path.join(projectRoot, 'dist'),
        filename: 'bundle.server.js',
    },
    module: {
        rules: [{
                test: /\.vue$/,
                loader: 'vue-loader!vue-style-loader',
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: path.join(projectRoot, 'src'),
                exclude: /node_modules/,
                options: {
                    presets: ['@vue/babel-preset-app']
                }
            },
            {
                test: /\.less$/,
                loader: "style-loader!css-loader!less-loader"
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.scss$/,
                loader: "style-loader!css-loader!sass-loader"
            },
            /*{
                test: /\.styl$/,
                loader: 'style-loader!css-loader!stylus-loader'
            },
            */
            {
                test: /\.(jpg|png)$/,
                loader: 'url-loader'
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)\w*/,
                loader: 'url-loader'
            },
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ],
    resolve: {
        extensions: ['.js', '.json', '.css', '.scss','.vue'],//添加在此的后缀所对应的文件可以省略后缀
        alias: {
            'vue$': 'vue/dist/vue.runtime.esm.js',
            '@': path.resolve(path.join(projectRoot, 'src')),
        },
        modules: [
            path.resolve(path.join(projectRoot, 'node_modules')),
            path.resolve(path.join(projectRoot, 'src'))
            ],
    }
}

一些其他问题

import 路径问题

import api from 'API/index'

import api from 'api/index'

api是本地的一个路径，要么用./api引入，要么用API引入

import的命名问题

import api from 'API/index'

这里的api是说，将API/index导出的所有东西作为api的attributes，可以直接通过api.blabla调用 vs

import {api} from 'API/index'

这里的api是值从API/index中引入api, 如果在源文件中没有定义，那么为undefined.

参考： webpack中文文档，讲解详细

简介