cjexe的博客

loader特性 loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。 loader 可以是同步的，也可以是异步的。 loader 运行在 Node.js 中，并且能够执行任何可能...

vue-loader 配置项 对于.vue文件的配置项 在build目录下 新建 vue-loader.config.js vue-loader.config.js 配置项目 使用函数 是为了 不同环境进行使用 module.exports = (isDev) => { return { preserveWhitepace: true, extractCSS: true, cs...

vue框架代码&业务代码拆分 需求分析 打包类库文件，第三方包、vue框架代码打包，这类代码稳定性比较高的 业务代码是经常更新迭代的 为了让浏览器尽可能长的时间缓存我们的静态文件，如果把类库代码和业务代码打包在一起，那么类库代码会跟着业务代码的更新而更新，而不能长时间的是浏览器里缓存，希望利用缓存，减少浏览器流量，提高用户浏览器加载速度，所以单独拆分出来进行打包 单独打包vue框架代...

Step1安装插件 npm i extract-text-webpack-plugin webpack.config.js 配置 const ExtractPlugin = require('extract-text-webpack-plugin') Step2 配置 区分环境 开发环境 development 正式环境 production 正式环境中 去掉style-loa...

npm i postcss-loader autoprefixer babel-loader babel-core .babelrc 作用&配置 babel用的配置文件 .babelrc 为了使用vue的render方法和vue支持jsx { "presets": [ "env" ], "plugins": [ "transform-vue-jsx" ...

Step1 安装 npm i webpack-dev-server npm i cross-env Step2 配置 要判断下，这个webpack的配置是要同时跑在开发环境和生产环境的，所以需要一个变量区分下 package.json 加 dev NODE_ENV=production 适用于 Mac平台上 set NODE_ENV=production 适用于win平台下 这个cross-e...

webpack做了哪些事 把这些不同的静态资源的类型把它打包成一个js，然后我们在html里面去引用这个js的时候，我们的html里面的js就可以正常的运行然后去执行我们的操作 因为我们大家知道做前端项目的时候，大家应该有经验就是我们希望把很多零碎的js打包成一起，因为这样可以减少HTTP请求 同样的我们希望使用模块依赖，因为我们会做很多可复用的代码，把它写到一个模块里面去，这样的话我们在下一次...

在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。 每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。 精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。 Node.js 从最一开始就支持模块化编程。然而，在 web，模块化的支持正缓慢到来。在 web 存在...

基本配置 webpack.config.js var path = require('path'); module.exports = { mode: 'development', entry: './foo.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'foo.bundle.js' ...

webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。 ConsoleLogOnBuildWebpackPlugin.js const pluginName = 'ConsoleLogOnBuildWebpackPlugin'; class Console...