精华内容
参与话题
问答
  • vue入门——通过webpack构建vue项目

    千次阅读 2019-01-25 20:04:04
    本篇主要介绍如何通过webpack构建一个简单的vue项目,不涉及vue的安装,如果没有安装vue的话,请先安装vue. 在使用vue的时候,通常有两种方式,一种是在html中引入vue.min.js,利用vue的语法规则进行开发。另一种是...

    简介:

    本篇主要介绍如何通过webpack构建一个简单的vue项目,不涉及vue的安装,如果没有安装vue的话,请先安装vue.

    在使用vue的时候,通常有两种方式,一种是在html中引入vue.min.js,利用vue的语法规则进行开发。另一种是通过webpack构建vue工程(不知这样描述是不是准确),本篇将对该方法展开叙述(前提安装了vue):

    步骤

    1、建立项目路径。首先建立一个项目路径(我的位于D:\Program Files\vueProject),尽量不要放在c盘,打开命令行窗口,将路径切换到工作路径中。

    2、输入vue init webpack demo,建立项目。其中demo使我们要建立的项目名称,当脚本执行时,会继续进行确认。如下图,其中的一些乱码我也不知道是什么原因。

    接下来就是确认项目描述信息,作者信息,这个根据个人喜好,填写吧。Vue build选择默认的,vue-router选择yes(如果不选择,则无法使用vue的路由功能,有关路由功能的参考vue路由详解,个人觉得这块还是比较重要的)

    下面的内容应该是有关js语法检测的内容,直接输入n就可以,暂时用不到。然后按enter,直到开始安装。

    出现以下内容,表示已经正确安装。

    根据提示信息,切换到demo目录下,然后执行npm run dev。编译并启动我们的项目

    在浏览器中输入访问的网址,访问界面表示已经正确配置

    至此,项目已经成功构建,在下一篇内容中,我们将对生成的文件进行简单的说明。

    展开全文
  • webpack4

    千次阅读 2018-02-28 15:30:05
    还好前面写webpack3.x稍微赶上了...包含了大量的特性更新, 以及极大的性能优化(最高可达 98%)Webpack 4 中移除了 CommonsChunkPlugin, 替换以一系列默认的配置以及简单的 optimize.splitChunks 接口同时 Webpack 4 ...

    还好前面写webpack3.x稍微赶上了点热度,最近在准备重构,还在考虑要不要使用parcel,正好发布了webpack4.0.0,就研究了下,修改还是比较大的。包含了大量的特性更新, 以及极大的性能优化(最高可达 98%)Webpack 4 中移除了 CommonsChunkPlugin, 替换以一系列默认的配置以及简单的 optimize.splitChunks 接口同时 Webpack 4 为我们带来了 mode 的配置项, 允许开发者根据不同的需求选择是面向开发环境优化还是生产环境优化, 从而降低了初学者的门槛更多变化。
    webpack4.0.0更新
    下面摘取其中比较重要的几个点

    变化

    不再支持nodejs4以下的版本
    1.您现在必须选择(mode或–mode)两种模式:生产或开发
    生产能够实现各种优化以生成优化的捆绑包
    生产不支持观看,开发针对快速增量重建进行了优化
    生产也使模块连接(范围提升)
    process.env.NODE_ENV 被设置为生产或开发(仅在构建代码中,而不是在配置中)

    2.您不再需要使用这些插件:
    NoEmitOnErrorsPlugin- > optimization.noEmitOnErrors(默认情况下处于生产模式)
    ModuleConcatenationPlugin- > optimization.concatenateModules(默认情况下处于生产模式)
    NamedModulesPlugin- > optimization.namedModules(在开发模式下默认开启)
    CommonsChunkPlugin 被删除 - > optimization.splitChunks

    特点

    webpack现在支持这些模块类型:
    javascript / auto:(webpack 3中的默认版本)启用了所有模块系统的Javascript模块:CommonJS,AMD,ESM
    javascript / esm:EcmaScript模块,所有其他模块系统都不可用
    javascript / dynamic:只有CommonJS和EcmaScript模块不可用
    json:JSON数据,可通过require和import获取
    webassembly / experimental:WebAssembly模块(目前是实验性的)
    WebAssembly模块
    可以导入其他模块(JS和WASM)
    来自WebAssembly模块的导出通过ESM导入进行验证
    尝试从WASM导入不存在的导出时,您会收到警告/错误
    只能用于异步块。它们不起作用(对网络性能不利)
    使用WASM通过导入模块 import()
    optimization.splitChunks选项介绍
    https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693

    下面的太冗长了,就不贴了

    我们在社区中请求大家对 webpack 4 进行构建性能测试,得出的结果非常有趣。结果很惊人,构建时间降低了 60%-98%!!
    性能测试过程中也发现了一些 loader 的 bug 我们已经及时修复了!!计划在v5版实现多进程,或者缓存功能。进一步提高性能.

    Mode, 零配置以及默认值

    webpack 新增了一个 mode 配置项。mode 有两个值:development 或者是 production,默认值是 production。mode 是我们为减小生产环境构建体积以及节约开发环境的构建时间提供的一种优化方案。entry,output 这些配置项也都有默认值了。这意味着你不需要每次都配置它们了,当然包括 mode。这可能意味着从现在开始,在我们做出如此巨大改变之后,你的配置文件会变得非常小!

    WebAssembly 支持

    Webpack 现在默认支持在任何本地 WebAssembly 模块中的 import 和 export 语句。这意味着你可以直接在 Rust, C++, C 或者其它 WebAssembly 支持语言中使用 import。

    总结

    : 估计受到了parcel的威胁,在构建速度和配置这两个比较不好的方面有了极大的提升,但是并未做到极致,可以用webpack-cli以体验webpack4.0.0的功能,目前vue-cli目前还不支持,可以再vue-cli的包里查看版本@vue/cli-service/package.json中查看webpack版本

    展开全文
  • webpack4 兼容老项目中的 require.js

    万次阅读 2019-08-05 20:57:33
    项目使用 require.js 进行模块化编程,并...require.js 使用 AMD 语法,webpack同样支持AMD语法,迁移成本较低,因此将 gulp 迁移至 webpack 4.38.0。 开始 先看一下requirejs.config requirejs.config({ baseUrl:...

    项目使用 require.js 进行模块化编程,并使用 gulp-requirejs-optimize 打包js文件,打包性能并不是很好。
    require.js 使用 AMD 语法,webpack同样支持AMD语法,迁移成本较低,因此将 gulp 迁移至 webpack 4.38.0

    开始


    先看一下requirejs.config

    requirejs.config({
        baseUrl: '/public/js',
        paths: {
            jquery: 'lib/jquery',
        	jqueryUI: 'lib/jquery-ui',
        	moment: 'lib/moment',
        	qs: 'lib/qs',
        	lodash: 'lib/lodash',
        	selectize: 'lib/selectize',
        }
    });
    
    require(['jquery', 'moment', 'modal/index'], function( $, moment, modal ){
        console.log($);
    });
    

    首先,需要让webpack能够解析上面path中的地址
    开始配置 resolve.alias
    webpack.config.js :

    const path = require('path');
    const resolve = filePath => path.resolve(process.cwd(), filePath);
    
    module.exports = {
     resolve: {
        alias: {
            jquery: resolve('lib/jquery'),
        	jqueryUI: resolve('lib/jquery-ui'),
        	moment: resolve('lib/moment'),
        	qs: resolve('lib/qs'),
        	lodash: resolve('lib/lodash'),
        	selectize: resolve('lib/selectize'),
        }
      },
    }
    

    这样可以让webpack可以正确解析require的依赖。文档
    但是项目中同样还有很多像是上面modal/index这中路径方式引入的依赖,如果不去定义会产生下面的报错
    error
    看了一遍文档得知modules可以解决这个问题~
    上代码

     resolve: {
    	  modules: [resolve('public/js')],
      }
    

    就这么简单~


    当然了,项目中很多插件依赖jquery,因此需要将其暴露至全局

    $ npm i -D expose-loader
    

    将下面的规则添加至 module.rules

    module: {
    	rules: [
    		 {
            test: /jquery.js/,
            use: [
              {
                loader: 'expose-loader',
                options: '$',
              },
              {
                loader: 'expose-loader',
                options: 'jQuery',
              }
              ],
          },
    	]
    }
    

    万事,收工!

    展开全文
  • vue-cli创建的webpack的项目由webpack3 升级到webpack4 eslint 报错 错误信息 Module build failed (from ./node_modules/eslint-loader/index.js): TypeError: Cannot read property 'eslint' of undefined 原因 ...

    vue-cli创建的webpack的项目由webpack3 升级到webpack4

    eslint 报错

    错误信息

    Module build failed (from ./node_modules/eslint-loader/index.js):
    TypeError: Cannot read property 'eslint' of undefined
    

    原因

    eslint-loader不兼容,升级 eslint 相关的版本

    npm uninstall es-loader eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue \
    eslint-config-standard eslint-friendly-formatter eslint
    
    
    npm i -D es-loader eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue \
    eslint-config-standard eslint-friendly-formatter eslint
    

    在这里插入图片描述

    展开全文
  • webpack3和webpack4区别

    千次阅读 2019-09-29 02:47:39
    webpack增加了一个mode配置,只有两种值development | production。对不同的环境他会启用不同的配置。 比如设置mode等于'development',会将process.env.NODE_ENV的值设为development,开发环境下启用optimization....
  • 初探webpack4

    千次阅读 2018-06-10 14:56:01
    2018/2/25,webpack4正式发布,距离现在已经过去三个多月了,也逐渐趋于稳定,而且现在的最新版本都到了4.12.0(版本迭代快得真是让人害怕)。 很多人都说webpack复杂,难以理解,很大一部分原因是webpack是基于...
  • yarn add webpack webpack-cli --dev //简写 yarn add webpack webpack-cli -D –dev 指安装到devDependencies:开发时的依赖包 –save dependencies:运行程序时的依赖包 方式二:NPM命令安装: 或者: npm install...
  • webpack4笔记

    2018-03-30 16:52:23
    对于webpack的概念类东西不多做解释,感兴趣可以去参考官方文档 ,主要记录如何去使用webpack4 开始一个项目 安装好了之后,使用命令行npm init来初始化一个项目,接下来对生成的package.json文件进行处理: 安装...
  • webpack --config webpack.config.js --mode production", "dev": "webpack-dev-server --config webpack.config.js" } var webpack = require('webpack'); var path = require('path'); var glob = require(...
  • 更好的维护代码,把 webpack.config.js 拆分成三个部分: 公 共 配 置 : 把 开 发 和 生 产 环 境 需 要 的 配 置 都 集 中 到 公 共 配 置 文 件 中 , 即 webpack.common.js 开发环境配置:把开发环境需要的相关...
  • webpack3到webpack4的变化

    千次阅读 2018-11-29 16:43:35
    webpack4中通过内置的mode使用相应模式的内置优化。设置mode等于'development',会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。设置mode等于'production'...
  • Webpack 4 入门笔记

    千次阅读 2020-03-10 12:36:48
    Webpack4 入门笔记
  • webpack4.x - webpack安装

    2020-01-05 17:26:16
    关于webpack的介绍,大家可以移步webpack4.x - 初始webpack 二.前提条件 在开始之前,请确保安装了 Node.js 的最新版本。使用 Node.js 最新的长期支持版本(LTS - Long Term Support),是理想的起步。使用旧版本...
  • Angular 4 + Webpack 4

    千次阅读 2018-04-29 22:50:11
    Angular 4 + Webpack 4 Demohttps://github.com/saoraozhe3hao/angluar4Demonpm installnpm install -g webpack-clinpm run webpack-server访问 http://localhost:8080/Angular 与 AngularJSAngularJS = AngularJS 1...
  • github详细代码地址:https://gitee.com/CarrieProject/weback4_configuration webpack环境安装 创建webpack-course文件  在这个webpack-course文件里创建3个文件  mkdir src dist config ls 查看是否...
  • Webpack 4 动态切割JS注入文件名

    千次阅读 2019-07-09 11:16:04
    webpack 切割的时候如何加个可以跟随文件名变化的前缀。 效果图 解决路径 GG大法+ webpack官方文档 官方文档还真的有提供对应的知识,说明如下 大体就是就是 [request] 可以拿到实际解析的文件名,来取代默认...
  • webpack4.x开发环境配置

    万次阅读 多人点赞 2018-03-09 23:14:36
    写这篇文章的初衷在于,虽然网络上关于webpack的教程不少,但是大多已经过时,由于webpack版本更新后许多操作变化很大...为此,笔者进行了最新版配置的探索,使用的是windows操作系统,如果你的是webpack4.x版本,可...
  • webpack4 对 JS 文件的引入 在本项目的第19章引入第三方插件库中,已经说过一种对 JS 的引入方法,就是使用 expose-loader,而对非npm 包的引入也在那一章做过介绍,那么引入第三方插件并不是只有那一种办法,这里...
  • vue项目从webpack3 升级webpack4

    千次阅读 2018-12-29 23:41:19
      错误1:TypeError: compilation.mainTemplate....webpack":"^4.0.0", "html-webpack-plugin":"^2.30.1" //会出现不兼容问题 解决方案:升级到最新版 npm i...
  • webpack4 optimization配置

    万次阅读 2018-09-12 14:50:57
    webpack4开始官方移除了commonchunk插件,改用了optimization属性进行更加灵活的配置,这也应该是从V3升级到V4的代码修改过程中最为复杂的一部分,下面的代码即是optimize.splitChunks 中的一些配置参考 ...
  • webpack4使用手记

    千次阅读 2018-11-04 19:11:29
    webpack4 splitChunks和runtimeChunk用法详解 为什么要用splitChunks webpack4之前使用CommonsChunkPlugin提取公共代码,但是CommonsChunkPlugin存在以下三个问题: 1:产出的chunk在引入的时候,会包含重复的代码; ...

空空如也

1 2 3 4 5 ... 20
收藏数 101,939
精华内容 40,775
关键字:

webpack4