webpack
cjexe
这个作者很懒,什么都没留下…
展开
-
webpack loader 特性
loader特性loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader,返回 webpack 所预期的 JavaScript。loader 可以是同步的,也可以是异步的。loader 运行在 Node.js 中,并且能够执行任何可能...转载 2019-07-24 10:42:49 · 497 阅读 · 0 评论 -
vue-loader配置
vue-loader 配置项 对于.vue文件的配置项在build目录下 新建 vue-loader.config.jsvue-loader.config.js 配置项目使用函数 是为了 不同环境进行使用module.exports = (isDev) => { return { preserveWhitepace: true, extractCSS: true, cs...原创 2019-08-18 17:04:42 · 2737 阅读 · 0 评论 -
webpack vue框架代码&业务代码拆分
vue框架代码&业务代码拆分 需求分析打包类库文件,第三方包、vue框架代码打包,这类代码稳定性比较高的业务代码是经常更新迭代的为了让浏览器尽可能长的时间缓存我们的静态文件,如果把类库代码和业务代码打包在一起,那么类库代码会跟着业务代码的更新而更新,而不能长时间的是浏览器里缓存,希望利用缓存,减少浏览器流量,提高用户浏览器加载速度,所以单独拆分出来进行打包单独打包vue框架代...原创 2019-08-18 17:04:26 · 995 阅读 · 0 评论 -
webpack配置 css单独分离打包
Step1安装插件npm i extract-text-webpack-pluginwebpack.config.js 配置const ExtractPlugin = require('extract-text-webpack-plugin')Step2 配置 区分环境开发环境 development正式环境 production正式环境中 去掉style-loa...原创 2019-08-18 17:03:50 · 804 阅读 · 0 评论 -
vue项目 根目录下.babelrc postcss.config.js
npm i postcss-loader autoprefixer babel-loader babel-core.babelrc 作用&配置babel用的配置文件.babelrc 为了使用vue的render方法和vue支持jsx{ "presets": [ "env" ], "plugins": [ "transform-vue-jsx" ...原创 2019-08-18 17:04:02 · 4222 阅读 · 0 评论 -
webpack-dev-server 使用
Step1 安装npm i webpack-dev-servernpm i cross-envStep2 配置要判断下,这个webpack的配置是要同时跑在开发环境和生产环境的,所以需要一个变量区分下package.json加 devNODE_ENV=production 适用于 Mac平台上set NODE_ENV=production 适用于win平台下这个cross-e...原创 2019-08-18 17:03:19 · 349 阅读 · 0 评论 -
webpack 打包作用
webpack做了哪些事把这些不同的静态资源的类型把它打包成一个js,然后我们在html里面去引用这个js的时候,我们的html里面的js就可以正常的运行然后去执行我们的操作因为我们大家知道做前端项目的时候,大家应该有经验就是我们希望把很多零碎的js打包成一起,因为这样可以减少HTTP请求同样的我们希望使用模块依赖,因为我们会做很多可复用的代码,把它写到一个模块里面去,这样的话我们在下一次...原创 2019-08-18 16:55:35 · 956 阅读 · 0 评论 -
webpack modules模块
在模块化编程中,开发者将程序分解成离散功能块(discrete chunks of functionality),并称之为模块。每个模块具有比完整程序更小的接触面,使得校验、调试、测试轻而易举。 精心编写的模块提供了可靠的抽象和封装界限,使得应用程序中每个模块都具有条理清楚的设计和明确的目的。Node.js 从最一开始就支持模块化编程。然而,在 web,模块化的支持正缓慢到来。在 web 存在...转载 2019-07-24 11:09:49 · 771 阅读 · 0 评论 -
webpack configuration 基本配置
基本配置webpack.config.jsvar path = require('path');module.exports = { mode: 'development', entry: './foo.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'foo.bundle.js'...转载 2019-07-24 10:58:59 · 625 阅读 · 0 评论 -
webpack plugin
webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用,并且 compiler 对象可在整个编译生命周期访问。ConsoleLogOnBuildWebpackPlugin.jsconst pluginName = 'ConsoleLogOnBuildWebpackPlugin';class Console...转载 2019-07-24 10:50:59 · 82 阅读 · 0 评论