webpack用法1

  1. 新建文件夹,按住shift右击选择在此处打开命令窗口。
  2. npm init
  3. npm install webpack --save-dev
  4. 新建hello.js文件,function hello(str){ alert(str); }
  5. webpack hello.js hello.bundle.js
  6. 新建world.js文件 function world(){ return { } }
  7. 改hello.js为 require("./world.js");
  8. 运行
  9. 新建style.css      body{background:#ccc;}
  10. 改hello.js为require("style-loader!css-loader!./style.css");
  11. npm install css-loader style-loader --save-dev
  12. 新建index.js文件<script src="hello.bundle.js"></script>  hello.js文件加上hello(‘hello world!‘);
时间: 2024-11-09 06:16:18

webpack用法1的相关文章

webpack用法总结

原先已经翻译过一篇关于webpack的文章了,那是刚开始学习webpack时参考阮一峰的教程,顺便就把它的英文文章给翻译了过来.Webpack是一个强大的模块化打包和构建工具,不仅能对JS进行打包,而且还能通过加载器对CSS .image .font 进行打包,引用时直接当作模块来引用,最后统一打包成一个bundle.js文件来输出:同时Webpack还支持插件功能,其各种插件大大丰富了webpack的功能,如最常见的html-webpack-plugin插件,能由写好的模版在编译后直接生成所需

(转)webpack用法

前言 webpack前端工程中扮演的角色越来越重要,它也是前端工程化很重要的一环.本文将和大家一起按照项目流程学习使用wbepack,妈妈再也不用担心我不会使用webpack,哪里不会看哪里.这是一个由浅入深的文章. 工程化 这里是一个项目工程化,规范化的设置,如果是初次使用webpack的同学还是最后在看这一块知识 现在vue.react等脚手架都会自动将开发环境使用的webpack的配置文件和生产环境的配置文件分开,将压缩代码,添加hash控制版本等操作放在项目上线时运行,这样避免了在开发阶

Vue(四)之webpack和vue-cli

01-webpack介绍 官方文档:https://www.webpackjs.com/concepts/ 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle. # 全局下载webpack的3.12.0版本 npm install [email pro

Webpack 打包太慢? 试试 Dllplugin

webpack在build包的时候,有时候会遇到打包时间很长的问题,这里提供了一个解决方案,让打包如丝般顺滑~ 1. 介绍 在用 Webpack 打包的时候,对于一些不经常更新的第三方库,比如 react,lodash,vue 我们希望能和自己的代码分离开,Webpack 社区有两种方案 CommonsChunkPlugin DLLPlugin 对于 CommonsChunkPlugin,webpack 每次打包实际还是需要去处理这些第三方库,只是打包完之后,能把第三方库和我们自己的代码分开.而

Web 前端性能优化 : 如何有效提升静态文件的加载速度

作者:刘轶斌,腾讯应用开发 工程师商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处.原文链接:http://wetest.qq.com/lab/view/345.html 一.如何优化 用户在访问网页时, 最直观的感受就是页面内容出来的速度,我们要做的优化工作, 也主要是为了这个目标.那么为了提高页面加载(或者渲染)速度呢?一般来说有三个方面: 1.代码逻辑:优秀的代码逻辑结构可以有效减少渲染页面使用的内存和速度(比如虚拟DOM),此方面不在本文讨论范围内. 2.SSR服务器渲染,也

webpack-插件

插件(Plugins) 插件是 wepback 的支柱功能.webpack 自身也是构建于,你在 webpack 配置中用到的相同的插件系统之上! 插件目的在于解决 loader 无法实现的其他事. 剖析 webpack 插件是一个具有 apply 属性的 JavaScript 对象.apply 属性会被 webpack compiler 调用,并且 compiler 对象可在整个编译生命周期访问. ConsoleLogOnBuildWebpackPlugin.js function Conso

Web前端性能优化——如何有效提升静态文件的加载速度

一.如何优化 用户在访问网页时, 最直观的感受就是页面内容出来的速度,我们要做的优化工作, 也主要是为了这个目标.那么为了提高页面加载(或者渲染)速度呢?一般来说有三个方面: 1.代码逻辑:优秀的代码逻辑结构可以有效减少渲染页面使用的内存和速度(比如虚拟DOM),此方面不在本文讨论范围内. 2.SSR服务器渲染,也就是所谓的“直出”.将首屏所有内容在服务器端渲染成html静态代码后,直接输出给浏览器,可以有效加快用户访问站点时首屏的加载时间.不过此方面也不在本文讨论范围内. 3.提升静态文件的加

webpack解惑:require的五种用法

webpack中可以写commonjs格式的require同步语法,可以写AMD格式的require回调语法,还有一个require.ensure,以及webpack自己定义的require.include,再加上ES6的import语法,这么多岂不是会把人给搞乱.本篇就来梳理一下这些require各自的特点,以及都在什么场景下使用. commonjs同步语法 经典的commonjs同步语法如下: var a = require('./a'); a.show(); 此时webpack会将a.js

webpack中output配置项中chunkFilename属性的用法

chunkFilename和webpack.optimize.CommonsChunkPlugin插件的作用差不多,都是用来将公共模块提取出来,但是用法不一样,这里主要介绍chunkFilename的使用 entry:{ main:__dirname + '/app/main.js', index:__dirname + '/app/index.js' }, output:{ path:__dirname + '/public', //通过HtmlWebpackPlugin插件生成的html文件