webpack打包工具入门

羽翰尘

修改于 2019-11-26 16:59:12

4870

修改于 2019-11-26 16:59:12

文章被收录于专栏：技术向技术向

本文由腾讯云+社区自动同步，原文地址 https://stackoverflow.club/article/introduce_to_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'))
            ],
    }
}