精华内容
下载资源
问答
  • 在实际工作,为了调试方便,可能需要随时更换接口环境、加解密等相关配置。如果每次调试都重新打包,操作起来比较麻烦,且 webpack 打包之后的内容无法进行反向编译。 我们可以在全局暴露出一个配置文件,使这个...

    应用场景

    • 在实际工作中,为了调试方便,可能需要随时更换接口环境、加解密等相关配置。如果每次调试都重新打包,操作起来比较麻烦,且 webpack 打包之后的内容无法进行反向编译。
    • 我们可以在全局暴露出一个配置文件,使这个文件不会被 webpack 打包,以此用来控制我们需要频繁更改的配置参数。

    目录结构及使用

    • 在 static 文件下新建一个 js 文件,我这里起名为 config.js
    |-- public
    |-- |-- js
    |-- |-- static
    |-- |-- |-- config.js
    |-- |-- index.html
    |-- dist
    
    • 在 config.js 中,把需要控制的变量绑定到 window 上
    window.global = {
      somethingFlag: false,
      baseUrl:'http://XXX.XXX.com',
      // 。。。 其他需要配置的内容
    }
    
    • 在index.html 中引入配置文件
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <title>test</title>
      <!-- 引入全局配置文件 -->
      <script src="static/config.js"></script>
    </head>
    <body>
      <div id="app"></div>
    </body>
    </html>
    
    • 代码中使用的时候,只需要访问 window 上绑定的这个对象即可
    if(window.global.somethingFlag) {
    	// somethingFlag 为 true 时做一些事
    } else {
        // somethingFlag 为 false 时做一些事
    }
    
    // 创建axios实例
    const service = axios.create({
        baseURL: window.global.baseUrl,// 请求根目录
        timeout: 20000 // 请求超时时间
    })
    
    • 配置好文件后,进行打包,就会发现 static 中添加的 config.js 没有被打包,并且修改 config.js 中的内容后,配置会生效。
    |-- dist
    |-- |-- css
    |-- |-- fonts
    |-- |-- img
    |-- |-- js
    |-- |-- static
    |-- |-- |-- config.js
    |-- |-- index.html
    
    展开全文
  • 背景 公司代码提供给第三方使用,为了不完全泄露源码,需要对给出的代码进行加密混淆,前端代码虽然无法做到完全加密混淆,但是通过使用 webpack-obfuscator 通过增加随机废代码段、字符编码转义等方法可以...配置 // w

    背景
    公司代码提供给第三方使用,为了不完全泄露源码,需要对给出的代码进行加密混淆,前端代码虽然无法做到完全加密混淆,但是通过使用 webpack-obfuscator 通过增加随机废代码段、字符编码转义等方法可以使构建代码完全混淆,达到无法恢复源码甚至无法阅读的目的。

    安装
    在这里插入图片描述

    webpack-obfuscator https://www.npmjs.com/package/webpack-obfuscator

    npm install --save-dev webpack-obfuscator
    配置

    // webpack.config.js
    const JavaScriptObfuscator = require('webpack-obfuscator');
    module.exports = {
      entry: {
        'abc': './test/input/index.js',
        'cde': './test/input/index1.js'
      },
      output: {
        path: 'dist',
        filename: '[name].js'
      },
      plugins: [
        new JavaScriptObfuscator({
          rotateUnicodeArray: true
          // 数组内是需要排除的文件
        }, ['abc.js'])
      ]
    };
    

    vue cli 项目配置:

    // vue.config.js
    const path = require('path');
    var JavaScriptObfuscator = require('webpack-obfuscator');
    module.exports = {
      publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
      productionSourceMap: false,
      configureWebpack: {
        plugins: [
          new JavaScriptObfuscator({
            rotateStringArray: true,
          }, [])
        ]
      },
      pwa: {},
      pages: {}
    }
    

    若只想在打包时加密混淆,本地运行时不混淆,可以进行以下的配置:

    configureWebpack: (process.env.NODE_ENV === 'production') ? {
        plugins: [
          new JavaScriptObfuscator({
            // ...
          }, [])
        ]
      } : {},
    

    vue cli 2.x 配置在 webpack.prod.conf.js 中

    构建
    npm run build
    构建文件对比

    1. 原始文件
    // test.js
    function abc() {
        for (let i = 0; i < 10; i++) {
            console.log(`第${i}个,你好,hello`)
        }
    }
    abc()
    
    1. webpack 默认工具uglifyjs-webpack-plugin
    webpackJsonp([2],{lVK7:function(o,l){!function(){for(var o=0;o<10;o++)console.log("第"+o+"个,你好,hello")}()}},["lVK7"]);
    
    
    
    1. webpack-obfuscator 无参数时
    
    new JavaScriptObfuscator({
    }, [])
    var _0x1f6e=["个,你好,hello","lVK7","log"];!function(n,o){!function(o){for(;--o;)n.push(n.shift())}(++o)}(_0x1f6e,323);var _0x3655=function(n,o){return _0x1f6e[n-=0]};webpackJsonp([2],{lVK7:function(n,o){!function(){for(var n=0;n<10;n++)console[_0x3655("0x0")]("第"+n+_0x3655("0x1"))}()}},[_0x3655("0x2")]);
    
    1. webpack-obfuscator 高度混淆
      低性能:性能比没有模糊处理慢 50-100%
    new JavaScriptObfuscator({
      // 压缩代码
      compact: true,
      // 是否启用控制流扁平化(降低1.5倍的运行速度)
      controlFlowFlattening: true,
      // 应用概率;在较大的代码库中,建议降低此值,因为大量的控制流转换可能会增加代码的大小并降低代码的速度。
      controlFlowFlatteningThreshold: 1,
      // 随机的死代码块(增加了混淆代码的大小)
      deadCodeInjection: true,
      // 死代码块的影响概率
      deadCodeInjectionThreshold: 1,
      // 此选项几乎不可能使用开发者工具的控制台选项卡
      debugProtection: true,
      // 如果选中,则会在“控制台”选项卡上使用间隔强制调试模式,从而更难使用“开发人员工具”的其他功能。
      debugProtectionInterval: true,
      // 通过用空函数替换它们来禁用console.log,console.info,console.error和console.warn。这使得调试器的使用更加困难。
      disableConsoleOutput: true,
      // 标识符的混淆方式 hexadecimal(十六进制) mangled(短标识符)
      identifierNamesGenerator: 'hexadecimal',
      log: false,
      // 是否启用全局变量和函数名称的混淆
      renameGlobals: false,
      // 通过固定和随机(在代码混淆时生成)的位置移动数组。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小,建议使用此选项,因为辅助函数可以引起注意。
      rotateStringArray: true,
      // 混淆后的代码,不能使用代码美化,同时需要配置 cpmpat:true;
      selfDefending: true,
      // 删除字符串文字并将它们放在一个特殊的数组中
      stringArray: true,
      stringArrayEncoding: 'rc4',
      stringArrayThreshold: 1,
      // 允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小,并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
      transformObjectKeys: true,
      unicodeEscapeSequence: false
    }, []),
    

    构建后文件大小: 29,999 字节(29.2 KB)

    var _0xa0d1=["w7Bzw6oKw6E=","wrwIUcOVw4M=","w4bChi3DtcOQ","wpLDtsK5w4LDpA==","OUlQwp1z","woEqw4XCtsOe","YR3DrkDCiA==","woAjwq/Ci8KQ","dDNzw5bDgA==",
    // ...
    ("0x201","xatR")]=function(x){return x()},x[_0x34e6("0x202","vdcx")](_0x2c01f8)},4e3);
    
    1. webpack-obfuscator 中等混淆
      最佳性能:性能比没有模糊处理慢 30-35%
    new JavaScriptObfuscator({
      // 压缩代码
      compact: true,
      // 是否启用控制流扁平化(降低1.5倍的运行速度)
      controlFlowFlattening: true,
      // 应用概率;在较大的代码库中,建议降低此值,因为大量的控制流转换可能会增加代码的大小并降低代码的速度。
      controlFlowFlatteningThreshold: 0.75,
      // 随机的死代码块(增加了混淆代码的大小)
      deadCodeInjection: true,
      // 死代码块的影响概率
      deadCodeInjectionThreshold: 0.4,
      // 此选项几乎不可能使用开发者工具的控制台选项卡
      debugProtection: false,
      // 如果选中,则会在“控制台”选项卡上使用间隔强制调试模式,从而更难使用“开发人员工具”的其他功能。
      debugProtectionInterval: false,
      // 通过用空函数替换它们来禁用console.log,console.info,console.error和console.warn。这使得调试器的使用更加困难。
      disableConsoleOutput: true,
      // 标识符的混淆方式 hexadecimal(十六进制) mangled(短标识符)
      identifierNamesGenerator: 'hexadecimal',
      log: false,
      // 是否启用全局变量和函数名称的混淆
      renameGlobals: false,
      // 通过固定和随机(在代码混淆时生成)的位置移动数组。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小,建议使用此选项,因为辅助函数可以引起注意。
      rotateStringArray: true,
      // 混淆后的代码,不能使用代码美化,同时需要配置 cpmpat:true;
      selfDefending: true,
      // 删除字符串文字并将它们放在一个特殊的数组中
      stringArray: true,
      stringArrayEncoding: 'base64',
      stringArrayThreshold: 0.75,
      transformObjectKeys: true,
      // 允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小,并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
      unicodeEscapeSequence: false
    }, []),
    构建后文件大小:7066字节(6.90kb)
    
    var _0x1a25=["UmFzT1U=","RkVIc0o=","VUt2eW4=","Q29IS0g=","V1NSZ0k=","d3RNT2w=","dlV6cUw=","RlpzZWg=","QnpzSlE=","cXBqQ1k=","YXBwbHk=","bFZLNw==","Y3p1Ymo=","TFZlQXE=","Y2NKWlY=","cmV0dXJuIChmdW5jdGlvbigpIA==",
    // ...
    (b[_0x4bcb("0x2a")]("第"+c,b[_0x4bcb("0x2b")]))}})}},[_0x4bcb("0x2f")]);
    
    1. webpack-obfuscator 低混淆
      高性能: 性能稍微慢于没javascript教程有混淆
    new JavaScriptObfuscator({
      // 压缩代码
      compact: true,
      // 是否启用控制流扁平化(降低1.5倍的运行速度)
      controlFlowFlattening: false,
      // 随机的死代码块(增加了混淆代码的大小)
      deadCodeInjection: false,
      // 此选项几乎不可能使用开发者工具的控制台选项卡
      debugProtection: false,
      // 如果选中,则会在“控制台”选项卡上使用间隔强制调试模式,从而更难使用“开发人员工具”的其他功能。
      debugProtectionInterval: false,
      // 通过用空函数替换它们来禁用console.log,console.info,console.error和console.warn。这使得调试器的使用更加困难。
      disableConsoleOutput: true,
      // 标识符的混淆方式 hexadecimal(十六进制) mangled(短标识符)
      identifierNamesGenerator: 'hexadecimal',
      log: false,
      // 是否启用全局变量和函数名称的混淆
      renameGlobals: false,
      // 通过固定和随机(在代码混淆时生成)的位置移动数组。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小,建议使用此选项,因为辅助函数可以引起注意。
      rotateStringArray: true,
      // 混淆后的代码,不能使用代码美化,同时需要配置 cpmpat:true;
      selfDefending: true,
      // 删除字符串文字并将它们放在一个特殊的数组中
      stringArray: true,
      stringArrayEncoding: false,
      stringArrayThreshold: 0.75,
      // 允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小,并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
      unicodeEscapeSequence: false
    }, []),
    

    构建后文件大小: 2,424 字节(2.36 KB)

    var _0x37a6=[“exception”,“trace”,“console”,“个,你好,hello”,“lVK7”,“apply”,"return (function() ",’{}.constructor(“return this”)( )’,“log”,“warn”,“debug”,“info”,“error”];!function(n,e){var o=function(e){for(;–e;)n.push(n.shift())};
    // …
    _0xe1fd(“0x3”)}()}},[_0xe1fd(“0xc”)]);
    对比表格
    文件名称 文件大小 正常构建 无参数 高度混淆 中度混淆 低度混淆
    test.js 117字节 177字节 363字节 29.2 KB(29,999 字节) 6.90KB(7066字节) 2.36 KB(2,424 字节)
    jquery.js 111 KB (113,852 字节) 85.0 KB (87,064 字节) 115 KB (117,770 字节) 1.24 MB (1,304,998 字节) 401 KB (411,543 字节) 117 KB (120,243 字节)
    主要属性

    {
      // 压缩,无换行
      compact: true,
      // 是否启用控制流扁平化(降低1.5倍的运行速度)
      controlFlowFlattening: false,
      // 应用概率;在较大的代码库中,建议降低此值,因为大量的控制流转换可能会增加代码的大小并降低代码的速度。
      controlFlowFlatteningThreshold: 0.75,
      // 随机的死代码块(增加了混淆代码的大小)
      deadCodeInjection: false,
      // 死代码块的影响概率
      deadCodeInjectionThreshold: 0.4,
      // 此选项几乎不可能使用开发者工具的控制台选项卡
      debugProtection: false,
      // 如果选中,则会在“控制台”选项卡上使用间隔强制调试模式,从而更难使用“开发人员工具”的其他功能。
      debugProtectionInterval: false,
      // 通过用空函数替换它们来禁用console.log,console.info,console.error和console.warn。这使得调试器的使用更加困难。
      disableConsoleOutput: false,
      //锁定混淆的源代码,使其仅在特定域和/或子域上运行。这使得某人只需复制并粘贴您的源代码并在其他地方运行就变得非常困难。
      domainLock: [],
      //标识符的混淆方式 hexadecimal(十六进制) mangled(短标识符)
      identifierNamesGenerator: 'hexadecimal',
      //全局标识符添加特定前缀,在混淆同一页面上加载的多个文件时使用此选项。此选项有助于避免这些文件的全局标识符之间发生冲突。为每个文件使用不同的前缀
      identifiersPrefix: '',
      inputFileName: '',
      // 允许将信息记录到控制台。
      log: false,
      // 是否启用全局变量和函数名称的混淆
      renameGlobals: false,
      // 禁用模糊处理和生成标识符
      reservedNames: [],
      // 禁用字符串文字的转换
      reservedStrings: [],
      // 通过固定和随机(在代码混淆时生成)的位置移动数组。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小,建议使用此选项,因为辅助函数可以引起注意。
      rotateStringArray: true,
      // 混淆后的代码,不能使用代码美化,同时需要配置 cpmpat:true;
      seed: 0,
      selfDefending: false,
      sourceMap: false,
      sourceMapBaseUrl: '',
      sourceMapFileName: '',
      sourceMapMode: 'separate',
      // 删除字符串文字并将它们放在一个特殊的数组中
      stringArray: true,
      // 编码的所有字符串文字stringArray使用base64或rc4并插入即用其解码回在运行时的特殊代码。true(boolean):stringArray使用编码值base64;false(boolean):不编码stringArray值;'base64'(string):stringArray使用编码值base64;'rc4'(string):stringArray使用编码值rc4。大约慢30-50%base64,但更难获得初始值。建议禁用unicodeEscapeSequence带rc4编码的选项以防止非常大的混淆代码。
      stringArrayEncoding: false,
      // 调整字符串文字将插入stringArray的概率
      stringArrayThreshold: 0.75,
      // 您可以将混淆代码的目标环境设置为以下之一:Browser;Browser No Eval;Node
      target: 'browser',
      // 是否启用混淆对象键
      transformObjectKeys: false,
      // 允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小,并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
      unicodeEscapeSequence: false
    }
    

    注意
    安装 webpack-obfuscator 时要注意webpack-obfuscator的版本要与本地项目 webpack 版本相匹配,我用的是webpack-obfuscator@0.18.0 项目 webpack 是 4.x 版本。(4.x版 本 webpack 使用最新版 webpack-obfuscator@3.3.0 会报错无法使用,webpack 杳升级到 5.x 版本)。
    excludes数组 的兼容 multimatch包语sql语句法,例如支持 [‘js/chunk-vendors..js’]、 [‘excluded_bundle_name.js’, '_bundle_name.js’] 或 'excluded_bundle_name.js’等。
    文章地址:https://www.cnblogs.com/dragonir/p/14445767.html 作者:dragonir

    展开全文
  • webpack开发Vue配置

    2021-11-25 21:10:23
    webpack的世界里,一张图片、一个css甚至一个字体,都成为模块(Module),彼此存在依赖关系,webpack就是来处理模块间的依赖关系的,并把它们进行打包。 webpack的主要适用场景是单页面富应用(SPA)。SPA通常是...

    在webpack的世界里,一张图片、一个css甚至一个字体,都成为模块(Module),彼此存在依赖关系,webpack就是来处理模块间的依赖关系的,并把它们进行打包。

    webpack的主要适用场景是单页面富应用(SPA)。SPA通常是由一个html文件和一堆按需加载组成,它的html结构可能会非常简单,比如:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <title>title</title>
        <link rel="stylesheet" href="/vonic/vonic.min.css">
      </head>
      <body>
        <von-app></von-app>
        <script type="text/javascript" src="dist/main.js"></script>
      </body>
    </html>
    

    只有一个div节点,所有的代码都集成在了神奇的main.js文件中。

    安装webpack与webpack-dev-server

    首先,创建一个目录demo,使用NPM初始化配置

    npm init

    执行后,会有一系统选项,按回车键快速确认,完成后在demo目录生成一个package.json文件。

      

    在本地局部安装webpack:

    npm install webpack --save-dev

    --save-dev是开发依赖来安装webpack。

    安装成功后,在package.json多一项配置:

     

     接着安装webpack-dev-server,它可以在开发环境中提供很多服务,比如启动一个服务器、热更新、接口代理等,配置起来也很简单。在本地局部安装:

    npm install webpack-dev-server --save-dev

     一个webpack.config.js文件

    接下来了解webpack的一些核心概念。

    webpack就是一个.js配置文件,架构好或差都体现在这个配置里,随着需求不断出现,工程配置也是逐渐完善的。

    首先在目录demo下创建一个js文件:webpack.config.js

    var config = {
    
    };
    
    module.exports = config;

    然后在package.js里增加一个快速启动webpack-dev-server服务的脚本:

    "dev": "webpack-dev-server --open --config webpack.config.js"

     接下来运行npm ren dev,会显示下面是否要安装webpack-cli,yes按回车键

    当运行npm run dev命令时,就会执行webpack-dev-server --open --config webpack.config.js命令。其中--config是指向webpack-dev-server读取的配置文件路径,这里直接读取我们在上一步创建的webpack.config.js文件。 --open会在执行命令时自动在浏览器打开页面,默认地址是localhost:8080。

    如果需要让其他同事访问我的本地,配置--host ip地址:

    "dev": "webpack-dev-server --host 100.100.100.1 --port 8888 --open --config webpack.config.js"

    webpack配置中最重要也是必选的两项是入口(Entry)和出口(Output)。入口的作用是告诉webpack从哪里开始寻找依赖,并且编译,出口则用来配置编译后的文件存储位置和文件名。

    在demo目录下新建一个文件名叫src,src文件里面再新建一个main.js作为入口的文件,加一行代码:

    document.getElementById('app').innerHTML = "hello main"

    然后在webpack.config.js中进行入口和输出的配置:

    var path = require('path');
    
    var config = {
        entry: {
            main: './src/main.js' // main就是我们配置的单入口,webpack会从main.js文件开始工作
        },
        output: {
            path: path.join(__dirname, './dist'), // 用来存放打包后文件的输出目录
            publicPath: '/dist/', // 指定资源文件引用的目录
            filename: 'main.js' // 用于指定输出文件的名称
        }
    };
    
    module.exports = config;

    因此,这里配置的output为打包后的文件会存储为demo/dist/main.js文件,只要在html中引入它就可以了。

    在demo目录下,新建一个index.html作为我们SPA的入口:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>app</title>
      </head>
      <body>
        <div id="app"></div>
        <script type="text/javascript" src="/dist/main.js"></script>
      </body>
    </html>
    

    在终端执行下面的命令,就自动在浏览器中打开页面了:

    npm run dev 

    出现页面Cannot GET/

    以前我做过没问题的,应该是版本问题,排查了是项目不存在,于是查看我用vue2和vue3做过项目,增加static对应项目文件路径,并打开整个项目文件,如下:

    var path = require('path');
    
    var config = {
        mode: 'development',
        entry: {
            main: './main.js'
        },
        output: {
            path: path.join(__dirname,'./dist'),
            publicPath: '/dist/',
            filename: 'main.js',
        },
        devServer: {
            static: './public',
        }
    };
    
    module.exports = config;

    再命令npm run dev,成功了

    在demo/src/main.js文件,修改页面的内容:

    document.getElementById('app').innerHTML = "hello webpack"

    然后保存,没有刷新浏览器,页面内容自动更新了“hello webpack”,这就是webpack-dev-server的热更新功能,它通过建立一个WebSocket连接来实时响应代码的修改。

    逐步完善配置文件

    在webpack的世界里,每个文件都是一个模块,比如.css、.js、.html、.jpg、.less等。对于不同的模块,需要用不同的加载器(Loaders)来处理,而加载器就是webpack最重要的功能。

    通过npm来安装:

    npm install css-loader --save-dev

    npm install style-loader --save-dev 

    安装完成后,在webpack.config.js文件里配置Loader,增加对.css文件的处理: 

     在module对象的rules属性中可以指定一系列的loaders,每一个loader都必须包含test和use两个选项。就是当webpack编译过程中遇到require()或import语句导入一个后缀名为.css的文件时,先将它通过css-loader转换,再通过style-loader转换,然后继续打包。use选项的值可以是数组或字符串,如果是数组,它的编译顺序就是从后往前。

    在demo/src目录下新建一个style.css文件,并在main.js中导入:

    /* style.css */
    #app{
        font-size: 22px;
        color: red;
    }
    
    // main.js
    import './style.css'
    document.getElementById('app').innerHTML = "hello webpack"

    重新执行npm run dev命令,可以看到页面中的文字已经变成红色,并且字号也大了。

    看上面,CSS是通过JavaScript动态创建<style>标签来写入的,就是样式代码都已经编译在了main.js文件里,但在实际业务中,因为项目大了样式会很多,都放在JS里太占体积。所以要用到webpack插件extract-text-webpack-plugins。

    这个插件功能很强大而且可以定制。这里我们使用这个插件来把散落在各地的css提取出来,并生成一个main.css的文件,最终在index.html里通过<link>的形式加载它。

    通过NPM安装extract-text-webpack-plugins插件:

    npm install extract-text-webpack-plugin --save-dev

     发现提示extract-text-webpack-plugin需要webpack3到4版本,但是我的webpack版本是5.x

     npm run dev果然报错

    上网搜了搜,由于webpack5以上的版本,只能用mini-css-extract-plugin代替

    通过npm来安装:

     npm install mini-css-extract-plugin --save-dev

    然后在webpack.config.js文件中导入插件,并改写loader的配置:

    var path = require('path');
    var MiniCssExtractPlugin = require('mini-css-extract-plugin');
    
    var config = {
        mode: 'development',
        entry: {
            main: './src/main.js'
        },
        output: {
            path: path.join(__dirname,'./dist'),
            publicPath: '/dist/',
            filename: 'main.js',
        },
        devServer: {
            static: './public',
        },
        module:{
            rules: [
                {
                    test: /\.css$/,
                    use: [
                        {
                          loader: MiniCssExtractPlugin.loader
                        },
                        'css-loader'
                    ]
                }
            ]
        },
        plugins: [
            // 重命名提取后的css文件
            new MiniCssExtractPlugin({
                filename: 'main.css',
            })
    
        ]
    };
    
    module.exports = config;

    在public/index.html文件中,增加一行<link>标签: 

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>app</title>
        <link rel="stylesheet" href="./dist/main.css">
      </head>
      <body>
        <div id="app"></div>
        <script type="text/javascript" src="./dist/main.js"></script>
      </body>
    </html>

    重新npm run dev,就可以看到<style>没有了,通过<link>引入的main.css文件已经生效。

    单文件组件与vue-loader

    vue.js是一个渐进式的JavaScript框架,在使用webpack构建Vue项目时,可以使用一种新的构建模式:.vue单文件组件。在webpack中使用vue-loader就可以对.vue格式的文件进行处理。

    使用.vue文件需要先安装vue-loader、vue-style-loader等加载器并做配置。要使用ES6语法,还需要安装babel和babel-loader等加载器。通过NPM安装以下依赖:

    npm install --save vue

    npm install --save-dev vue-loader

    npm install --save-dev vue-style-loader

    npm install --save-dev vue-template-compiler

    npm install --save-dev vue-hot-reload-api

    npm install --save-dev babel

    npm install --save-dev babel-loader  8版本,下面与这个版本的对应关系

    npm install --save-dev @babel/core

    npm install --save-dev @babel/preset-react

    npm install --save-dev @babel/preset-env

    npm install --save-dev babel-preset-mobx

    npm install --save-dev @babel/plugin-transform-runtime

    npm install --save @babel/runtime

    安装完成后,修改配置文件webpack.config.js来支持对.vue文件:

    var path = require('path');
    var MiniCssExtractPlugin = require('mini-css-extract-plugin');
    const VueLoaderPlugin = require('vue-loader/lib/plugin');
    
    var config = {
        mode: 'development',
        entry: {
            main: './src/main.js'
        },
        output: {
            path: path.join(__dirname,'./dist'),
            publicPath: '/dist/',
            filename: 'main.js',
        },
        devServer: {
            static: './public',
        },
        module:{
            rules: [
                {
                    test: /\.vue$/,
                    loader: 'vue-loader',
                    options: {
                        loaders: {
                            css: [
                                {
                                    loader: MiniCssExtractPlugin.loader
                                },        
                                'vue-style-loader',
                                'css-loader'
                            ]
                        }
                    }
                },
                {
                    test: /\.js$/ ,
                    loader: 'babel-loader',
                    exclude: /node_modules/
                },
                {
                    test: /\.css$/,
                    use: [
                        {
                          loader: MiniCssExtractPlugin.loader
                        },
                        'css-loader'
                    ]
                }
            ]
        },
        plugins: [
            // 重命名提取后的css文件
            new MiniCssExtractPlugin({
                filename: 'main.css',
            }),
    
            new VueLoaderPlugin()
        ]
    };
    
    module.exports = config;

    vue-loader在编译.vue文件时,会对<template>、<script>、<style>分别处理,所以在vue-loader选项里多了一项options来进一步对不同语言进行配置。比如在对css进行处理,会先通过css-loader解析,然后把处理结果再交给vue-style-loader处理。当你的技术栈多样化时,比如<style lang="less">,配置loaders就可以了。

    再npm run dev,先看看有没有提示刚才安装依赖版本问题,如果有问题,请自行百度,如果没有问题,继续下一步。

    支持ES6的解析,在demo目录下新建一个名为.babelrc的文件,并写入babel的配置,webpack会回复此配置文件来使用babel编译ES6代码:

    {
        "presets": ["@babel/preset-env", "@babel/preset-react", "mobx"],
        "plugins": [
            "@babel/plugin-proposal-object-rest-spread",
            "@babel/plugin-transform-runtime"
        ]
    }

    在demo/src目录下新建一个app.vue的文件并写入以下内容:

    <template>
        <div id="app">
            <div>Hello {{ name }}</div>
        </div>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    name: 'Vue.js'
                }
            },
        }
    </script>
    
    <style scoped>
        #app{
            font-size: 24px;
            color: red;
        }
    </style>

    <style scoped>中 scoped属性,这部分样式只会对当前组件app.vue有效,如果不加这个属性的话会统一提取并打包在main.css里。

    main.js文件中,把内容替换为下面的代码:

    import Vue from 'vue';
    import App from './app.vue';
    
    new Vue({
        el: '#app',
        render: h => h(App)
    })

    用于生产环境

    我们先对webpack进一步配置,来支持更多常用的功能。

    安装url-loader和file-loader来支持图片、字体等文件:

    npm install --save-dev url-loader

    npm install --save-dev file-loader

    webpack.config.js增加下面代码:

    {
        test: /\.(png|jpe?g|gif|svg)\??.*$/,
        loader: 'url-loader',
        options: {
            limit: 1024,
            esModule: false
        }
    }

     当遇到这些格式文件时,url-loader会把它们一起编译到dist目录下,limit:1024是如果这个文件小于1kb,就以base64的形式加载,不会生成一个文件。

    下面webpack打包的产物。

    单页面富应用(SPA)技术,最终只有一个html的文件,其余都是静态资源。实际部署到生产环境时,一般会将html挂在后端程序下,由后端路由渲染这个页面,将所有的静态资源(css、js、img、iconfon等)单独部署到CDN,这样就实现了前后端完全分离。

    在package.json中,再加入一个build的快捷脚本用来打包:

    "scripts": {
        "build": "webpack --config webpack.prod.config.js --mode development"
    },    

    用--mode production打包出来就被压缩,空行和注释消失;

    用--mode development打包出来就是未压缩的;

    打包需要两个依赖,通过NPM安装:

    npm install --save-dev webpack-merge
    npm install --save-dev html-webpack-plugin

    为了方便开发和生产环境的切换,在demo目录下新建一个用于生产环境的配置文件webpack.prod.config.js:

    var webpack = require('webpack');
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    var MiniCssExtractPlugin = require('mini-css-extract-plugin');
    var { merge } = require('webpack-merge'); //{ merge }通过es6提供的解构赋值,即按需加载
    var webpackBaseConfig = require('./webpack.config.js'); 
    const VueLoaderPlugin = require('vue-loader/lib/plugin');
    
    webpackBaseConfig.plugins = [];
    
    module.exports = merge(webpackBaseConfig,{
        output: {
            publicPath: '/dist/',
            // 将入口文件重命名为带有20位hash值得唯一文件
            filename: '[name].[hash].js',
        },
        plugins:[
            new MiniCssExtractPlugin({
                // 提取css,并重命名为带有20位hash值得唯一文件
                filename: '[name].[hash].css',
            }),
            // 定义当前 node 环境为生产环境
            new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV: JSON.stringify("development"),
                }
            }),
            // 提取模板,并保存入口 html 文件
            new HtmlWebpackPlugin({
                filename: './index.html',
                template: './index.ejs',
                inject: false
            }),
            // vue-loader 15.x 以上版本需要配置
            new VueLoaderPlugin()
        ]
    })

    上面安装的webpack-merge模块就是用于合并两个webpack的配置文件,所以prod的配置是在webpack.config.js基础上扩展的。静态资源在大部分场景下都有缓存(304),更新上线后一般都希望用户能及时看到最新内容,所以给打包后的css和js文件的名称都加了20位的hash值,这样文件名就唯一了,只要不对html文件设置缓存,上线后立即就可以加载最新的静态资源。 

    html-webpack-plugin是用来生成html文件的,它通过template选项来读取指定的模板.ejs,然后输出到filename指定的目录。模板index.ejs动态设置静态资源的路径和文件名,代码如下:

    <!DOCTYPE html>
        <html lang="zh-CN">
        <head>
            <meta charset="UTF-8">
            <title>Webpack App</title>
            <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>">
        </head>
        <body>
            <div id="app"></div>
            <script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[0] %>"></script>
        </body>
    </html> 

    在终端运行npm run build,等待一会就完成打包,成功后在demo下回生成一个dist的目录。

    每次打包前没有删除上一个dist文件,只会在旧dist文件里面叠加一些文件,我们想要打包前自动删除上一个dist文件

    通过NPM安装clean-webpack-plugin:

    npm install --save-dev clean-webpack-plugin

     在webpack.config.js引入如下代码:

    const { CleanWebpackPlugin } = require('clean-webpack-plugin');
    

    在plugins中配置:

    new CleanWebpackPlugin()

    在终端运行npm run build,就可以自动删除上一个dist文件,然后重新进行打包,生成干净的dist目录。

    在vue3没公布之前,我学过webpack配置到打包,现在再次使用最新版本的webpack5,babel-loader 8版本,兼容这些版本做出配置,多一些新东西,多学到一些新知识。webpack还有很多高级的配置和丰富的插件及加载器,等着我学。活到老,学到老。

    展开全文
  • 最近在学习webpack,...本文主要和大家介绍了Vue+webpack项目基础配置教程,需要的朋友可以参考下,希望能帮助到大家。1.开发环境:vscode,node.js,vue.js,webpack大家自己安装一下node.js可以参考菜鸟教程使用的ID...

    最近在学习webpack,跟着课程一个单页面应用,在这里记录一下。这个部分主要讲了如何配置webpack的环境,以及webpack dev的配置。记录比较粗略,后续会更新。本文主要和大家介绍了Vue+webpack项目基础配置教程,需要的朋友可以参考下,希望能帮助到大家。

    1.开发环境:vscode,node.js,vue.js,webpack

    大家自己安装一下node.js可以参考菜鸟教程

    使用的IDE是 VScode

    2.项目初始化

    快捷键ctrl+` 打开vscode控制台

    vscode界面

    2.1安装webpack vue vue-loader

    npm init

    npm i webpack vue vue-loader

    npm 出现warn提醒你需要依赖,按照提示进行安装

    warn

    安装相应的loader

    npm i css-loader vue-template-compiler

    2.2配置webpack可以加载app.vue文件

    首先创建src文件夹,并在其下创建app.vue最为主代码文件,index.js作为入口文件。

    基础文件

    app.vue文件内容如下:

    {{text}}

    export default{

    data(){

    return {

    text: 'abc'

    }

    }

    }

    #test{

    color: red;

    }

    在src同级目录下

    创建webpack.config.js文件,配置入口entry,输出output

    创建package.json文件和webpack.config.js文件

    //webpack.config.js

    const path = require('path')

    module.exports = {

    entry: path.join(__dirname,'src/index.js'), //调用Index.js作为入口文件

    output: { //打包完的js文件会在bundle.js中,这个文件待会会自动生成的

    filename: 'bundle.js',

    path: path.join(__dirname,'dist') //用来存放bundle.js文件的地址,自己定义

    },

    module: {

    rules: [{

    test: /.vue$/,

    loader: 'vue-loader'

    }]

    }

    }

    index.js文件作为入口

    //index.js

    import Vue from 'vue'

    import App from './app.vue'

    const root = document.createElement('p')

    document.body.appendChild(root)

    new Vue({

    render: (h) => h(App)

    }).$mount(root)

    配置package.json文件中的scripts命令,添加build

    "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "build": "webpack --config webpack.config.js"

    },

    在控制台输入npm run build 命令进行打包,打包成功后如图

    webpack打包完成后

    2.3配置webpack可以加载非Js文件

    webpack.config.js文件具体配置

    在webpack.config.js中的module: {}模块中添加rules:[],可以设置webpack需要识别的文件类型,之前已经设置了vue文件类型,好需要添加css/图片。

    //webpack.config.js

    module: {

    rules: [

    {

    test: /.vue$/,

    loader: 'vue-loader'

    },

    {

    test: /.css$/,

    use:[

    'style-loader',

    'css-loader'

    ]

    },

    {

    test: /\.(gif|jpg|png|svg)$/,

    use: [{

    loader: 'url-loader',

    options: {

    limit: 1024,

    name:'[name].[ext]'

    }

    }]

    }

    ]

    }

    在控制台执行命令,安装相应的loader

    npm i style-loader css-loader url-loader file-loader

    测试非js类型文件打包效果

    目标:在js代码中import这些非js类型的文件中的内容

    再src子目录下,创建测试文件test.css。以及在images中放入jpg图片代用(一张就可以了,emmm我当时放多了就先不删了)

    src下文件结构

    在Index.js中import这些非js文件。

    //index.js

    import Vue from 'vue'

    import App from './app.vue'

    import './assets/styles/test.css' //import css文件

    import './assets/images/0.jpg' //import 图片

    const root = document.createElement('p')

    document.body.appendChild(root)

    new Vue({

    render: (h) => h(App)

    }).$mount(root)

    最后在控制台执行 npm run build测试结果。

    打包成功图片类似上面。

    2.4关于css预处理器。stylus的配置和测试

    stylus是css的一种预处理器,文件类型是 .styl 我们这里对其进行配置

    首先在webpack.config.js文件中的rules:[]模块中跟上面一样,加入如下代码,让其可以识别.styl文件

    //webpack.config.js

    {

    test:/.styl$/,

    use: [

    'style-loader',

    'css-loader',

    'stylus-loader'

    ]

    }

    然后在控制台安装stylus所需的loader文件

    npm i style-loader stylus-loader

    最后在控制台执行 npm run build测试结果。

    2.5配置webpack-dev-server:专门用在开发环境的打包

    因为正式环境和我们的开发环境有所区别,所以需要配置dev用来区分

    首先,安装 webpack-dev-server

    npm i webpack-dev-server

    然后, 修改package.json文件 ,在build下面添加dev配置

    package.json文件配置

    然后,修改webpack.config.js

    在全局添加target:'web'

    config.js

    因为这个文件要同时用在开发环境和正式环境,所以要加一个环境判断,在跑npm的时候添加变量标识不同环境。

    因为在windows和mac环境下的命令会不同,这里安装cross-env 包,使得在不同开发环境下命令相同。

    npm i cross-env

    再次修改package.json文件,在“build:”和“dev:"行添加dev命令

    cross-env NODE_ENV=development 后面不变

    package.json文件build

    然后,在webpack.config.js文件中进行判断。

    首先,配置config.devServer

    webpack2之后就可以直接用config.devServer进行配置了。

    更改文件头部几行代码

    在文件的最后加上如下代码

    config.devServer

    注意:

    host:'0.0.0.0'不要直接写localhost,这样别人的电脑就访问不了了;port不要被占用,不然会打不开

    最后.安装html-webpack-plugin插件使得html可以作为入口,自动包含JS

    npm i html-webpack-plugin

    修改webpack.config.js文件

    config.js

    config.js

    至此,dev配置基本完成

    控制台执行 npm run dev

    npm run dev

    打包成功的话就可以在浏览器中查看效果了,

    如果出现错误,根据提示修改,注意端口是否占用。我的8000端口占用了,后来用了8080端口就好了

    浏览器访问:localhost:8080,可以查看渲染效果。恩,背景图0.jpg是我爱豆23333。笔芯。注意左上角有红色的abc。

    浏览器效果

    2.6最后还有一些东西要加在config.js中

    最后还要加一些东西

    1) historyFallback:{}

    因为我们做的是单页应用,所以要加一下地址映射到入口index.html,这个先忽略

    2) 热加载功能。

    hot功能,可以实现局部渲染:比如你改了一个组件的代码,页面只重新渲染这个组件而不是整个页面进行渲染,不需要进行刷新操作。

    3) 一些插件

    webpack.HotModuleReplacementPlugin()启动hot功能

    webpack.NoEmitOnErrorsPlugin()去除一些不必要的信息

    4) 浏览器调试代码功能的工具

    在浏览器中调试的时候,代码不会转码。

    config.devtool = “#cheap-module-evel-source-map”

    最后配置完成后,重新npm run dev一次

    npm run dev

    成功之后,可以在浏览器中测试热加载效果,修改app.vue文件中的text的内容,就可以看到左上角那个红色的字在变了emmmm

    //app.vue

    {{text}}

    export default{

    data(){

    return {

    text: 'abc' //打开浏览器,然后直接改这里就可以实时看到文字变化效果了。

    }

    }

    }

    #test{

    color: red;

    }

    相关推荐:

    展开全文
  • Vue中webpack详解

    2021-09-13 15:02:56
    webpack中配置Vue plugin的使用 搭建本地服务器 认识webpack 什么是webpack? 我们先看看官方的解释: At its core, webpack is a static module bundler for modern JavaScript application.
  • Vue项目使用WebPack配置准确的说是vue-cli使用webpack配置参考链接Vue-cli4 生成项目的时候,会自动生成很多配置文件,自带babel语法转换,初始化webpack配置等操作。vue --version // 查看vue-cli版本如babel....
  • vue版本以及webpack版本

    千次阅读 2021-01-17 12:55:04
    最近在搭建vue框架的时候发现由于vue版本的快速迭代已经与原本般配的webpack产生了隔阂。webpack作为大前端的主流打包工具 如果与之不兼容,会有越来越多的麻烦事情。经过反复测试,得出结论一篇 vuewebpack最佳...
  • vue-cli webpack 项目版本升级

    千次阅读 2021-01-17 12:55:06
    包含 webpack@4 和 babel-loader@8 以及打包部分优化一键升级package.json 文件 依赖版本数手动去修改dependencies各个包的版本号太慢,so 借助了npm-check-updates工具,一键将package.json的依赖包版本号更新...
  • 一、 安装nodejs环境 ...具体安装步骤见地址:NodeJS、NPM...二、配置Vue-cli脚手架(cmd窗口配置) 1、我们还需要做的一个工作是,将npm的模块下载仓库从默认的国外站点改为国内的站点,这样下载模块的速度才能比较快,只
  • 这些功能都是可以在webpack中进行配置管理的,下面具体介绍说明。1、devServer:在我们开发中能够自动使我们的代码即时起作用,自动帮我们刷新页面,启动服务器后能够自动打开页面,就是使用了devServer,devServer只...
  • 在网络请求,选择一个js或css或html,但凡在Response Headers找到 content-encoding: gzip 键值对,这就说明这个文件启用了gzip压缩。响应头Etag:W/"字符串“表示启用的是在线压缩,Etag:"字符串"表示启
  • 创建vue3.0项目+webpack 新建一个项目 vue init webpack mypro//注意名字可能命名会提示出错 一个提示,关于vue2.0和vue3.0 输入提示命令 npm install -g @vue/cli-init 安装成功,再次输入新建一个项目...
  • Vue CLi3 修改webpack配置

    2021-06-21 11:09:39
    # Vue CLi3 修改webpack配置 # 审查项目的 webpack 配置 因为 @vue/cli-service 对 webpack 配置进行了抽象,当你想查看webpack配置时可以使用 inspect命令: vue inspect# 在终端打印 webpack配置信息 vue ...
  • 本文已获得原作者的独家授权,有想转载的朋友们可以在后台联系我申请开白哦!PS:欢迎掘友们向我投稿哦,被采用的文章还可以送你掘金精美周边!前言想必绝大多数用 Vue开发过项目的同学,或多...
  • 什么是webpackwebpack是一个module bundler(模块打包工具),所谓的模块就是在平时的前端开发,用到一些静态资源,如JavaScript、CSS、图片等文件,webpack就将这些静态资源文件称之为模块webpack支持AMD和CommonJS...
  • Vue脚手架隐藏了所有的webpack相关配置,如果想要查看具体的webpack配置,可以使用如下命令行: vue inspect > output.js 详细请参照:...
  • 文章目录 一、前端工程化 什么是前端工程化 前端工程化的解决方案 二、webpack 的基本使用 什么是 webpack 创建列表隔行变色项目 在项目中安装 webpack 在项目中配置 webpack mode 的可选值 webpack.config.js 文件...
  • 通过webpack将js及css文件打包 程序结构 1、各部分模块 //info.js //导出模块 export const name ='小红'; export const age ='18'; // mainUtils.js function add(num1, num2) { return num1 + num2 } ...
  • vue跨域/webpack跨域

    2021-01-20 21:37:22
    vue中的代理proxy 1.解决的问题: 前后端分离而产生的本地开发跨域问题 2.原理: 服务器端之间不存在跨域,利用了node代理,将域名发给本地服务器,再由本地服务器请求目的服务器 3.不同版本配置文件的区别 新版本的...
  • 一 安装NODEJS,NPM 二建一个目录名子随意 在目录里打开终端运行npm init -y 生成...四建立webpack.config.js 打包配制文件(这里可以通过entry.output设置打包入口入输出) module.exports={ //如果上的的时候...
  • vue-cli3之webpack配置

    2021-01-05 18:16:30
    在项目的根目录,新建一个vue.config.js文件: // vue.config.js const path = require("path"); const Timestamp = new Date().getTime(); module.exports = { configureWebpack: { resolve: { alias: { ...
  • I have created a vue webpack project using vue-cli.vue init webpack myprojectAnd then ran the project under dev mode:npm run devI got this error:Failed to load resource: the server responded with a ...
  • 文章目录步骤1、安装vite相关的包2、新建vite.config.js3、index.html引入main.js4、main.js引入App.vue方式调整5、调整自定义模块、路由引入方式:require -> import、export default6、script添加命令参考资料 ...
  • 好的,终于到了如何在webpack中使用Vue,在webpack中我们依旧要采取:模块化、模块化、模块化的思想来配置Vue,好的,下面我们一起来进行学习。 webpack配置Vue流程 1.既然我们要使用Vue,我们就需要Vue 之前我们...
  • vue&webpack多页面配置

    2021-02-11 14:54:13
    前言最近么及行发上来站切近多与数经需说宽换近多与由于项目需求,选择使用vue框架,webpack打包直接使用的vue-cli,因为需要多页面而vue-cli只有单页面,所以就决定修改vue-cli的配置文件来满足开发需求自水一套还...
  • 提示:文章写完后,目录可以...在vue-cli2中配置很简单,但是在vue-cli3中我没遇到过,今天我就尝试了一下,经过看各种文章终于大功告成了!!!! 提示:以下是本篇文章正文内容,下面案例可供参考 一、ProvidePlugi
  • vue 安装webpack

    2021-01-17 12:55:05
    webpack安装由于 webpack 执行打包压缩时依赖 nodeJS,所以在安装 webpack 之前先安装一下 nodeJS。...首先,用 npm 在项目的根目录创建一个package.json文件:# 从当前目录提取的信息生成默认的package.jsonn...
  • vue项目如何使用webpack打包代码

    千次阅读 2021-02-23 10:03:12
    现在是网络时代,在我们的生活网络成为了必不可少的,我们在网络上可以看到很多漂亮的功能丰富的页面,这些页面都是由复杂的JavaScript代码和各种依赖包组合形成的,那么这些都是怎么*组合在一起的呢,组合在一起...
  • Vue】项目没有webpack.config.js

    千次阅读 2021-08-01 09:39:50
    Vue新搭建脚手架工程,发现项目结构没有webpack.config.js(打包配置文件); 在Vue-CLI3的项目,起相同作用的文件是vue.config.js。 更多使用相关请参照官网文档:...
  • webpack 配置vue3的时候报错 你可能安装了局部的 vue 或者 vue-loader 的版本 低于16 解决方案 npm i vue-loader@16.2.0 -D npm i vue@next 成功打包 运行打包出来的 html 并没有报错 打包出来的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 131,680
精华内容 52,672
关键字:

vue中怎么配置webpack

vue 订阅