专栏首页技术向webpack打包工具入门

webpack打包工具入门

本文由腾讯云+社区自动同步,原文地址 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'))
            ],
    }
}

一些其他问题

  • import 路径问题
import api from 'API/index'

vs

import api from 'api/index'

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

  • import的命名问题
import api from 'API/index'

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

vs

import {api} from 'API/index'

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

参考:

webpack中文文档 ,讲解详细

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • pickle在python2和python3之间的兼容性

    本文由腾讯云+社区自动同步,原文地址 http://blogtest.stackoverflow.club/pickle-in-python2-python3/

    羽翰尘
  • 在centos中使用cosfs腾讯云免费存储

    腾讯云每个月提供50G的存储空间,10G的下行流量,免费的上行流量。最好的地方在于提供了基于fuse的文件系统,可以将对象存储映射为本地文件,非常适合于存储有限...

    羽翰尘
  • 基本vim使用

    本文由腾讯云+社区自动同步,原文地址 http://stackoverflow.club/vim-basic/

    羽翰尘
  • webpack4.0各个击破(6)—— Loader篇

    loader是webpack的核心概念之一,它的基本工作流是将一个文件以字符串的形式读入,对其进行语法分析及转换(或者直接在loader中引入现成的编译工具,例...

    大史不说话
  • webpack中的loader

    loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(t...

    刘亦枫
  • 看完这篇webpack-loader,不再怕面试官问了

    下面会从基本使用开始出发,探究一个loader怎么写,并实现raw-loader、json-loader、url-loader、bundle-loader

    lhyt
  • 从零搭建一个 webpack 脚手架工具(四)

    loader 的执行顺序是:从右到左、从下到上。在配置 sass 样式时,需要这么去写 loader:

    多云转晴
  • 玩转webpack之loader开发

    webpack提倡一切皆模块,所有类型的文件都可以经过文件加载器处理变成我们可加载的模块,那么这个文件加载器便是loader。

    IMWeb前端团队
  • 玩转webpack之loader开发

    webpack提倡一切皆模块,所有类型的文件都可以经过文件加载器处理变成我们可加载的模块,那么这个文件加载器便是loader。

    IMWeb前端团队
  • wepack中loader的分类

    enforce 属性会影响 loader 种类。不论是普通的,前置的,后置的 loader。

    Qiang

扫码关注云+社区

领取腾讯云代金券