__dirname + '/src' path.resolve(__dirname, 'src') path.resolve(__dirname, './src') path.join(__dirname, '/src') path.join(__dirname, './src') path.join(__dirname, 'src')上面几种写法等价.要注意什么时候加.什么时候加/,什么时候都不加比较发现,path.join更不容易弄错,推荐使用!…

之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 这次我还是在react中来使用它.我的react界面是单页面的应用 首先你的项目的根目录下要有一个package.json文件,来进行安装一下相应的依赖 package.json如下 "devDependencies": { "css-loader": "^0…

webpack是前端构建系统就像grunt和gulp(之前有学习过grunt所以也就大概明白webpack是个什么东西),所以说前端技术大部分还真是相通的,现在觉得当时多看的东西并不白费,虽然长时间不用会忘掉一丢丢,但是看过脑海中还是有印象的. webpack能够用作模块加载和打包类似Browserify,且能做更多.类似上诉模块管理工具都会有一个相应的配置文件,用于说明,你打包的文件,包装的模块等. webpack常用命令: webpack -p 压缩混淆脚本 webpack --watch…

这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解释. webpack.optimize.CommonsChunkPlugin -- 当入口文件不止一个时,才能引入次插件,否则会报如下错误: error in chunk common.js ...multiple assets emit to the same filename bundle.js…

一 .webpack学习环境准备: 1:window系统 2:安装node.js  官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:npm i nrm -g   (全局安装nrm包) 安装好后使用 nrm ls 查看 使用nrm use 镜像地址名称 注意:nrm只是提供了几个常用的下载包的URL地址.最终的装包工具还是npm或者cnpm工具,比如后面安装webpack包:cnpm install -g webpack  就会从n…

webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, 通过 import只用到了两个. 那么剩余的 8个, 会剔除掉没有用到的 死代码 util.js function a() {} function b() {} function c() {} function d() {} export default { a, b, c, d } index.j…

基础配置总结 webpack hello.js hello.bundle.js打包命令参数 --config filename : 指定其他名称做配置文件 --watch / -w : 监听文件改动,自动编译(速度快) -d : 开启(生成)source maps (用来调试) -p : 生产环境下编译(压缩) --progress : Print compilation progress in percentage --display-modules : Display even exclud…

1 loader 使用include,缩小编译范围: rules: [{ test: /\.js$/, include: path.resolve(__dirname, '../src'), use: [{ loader: 'babel-loader' }] } ] 2 使用resolve 设置省略的后缀名和默认的文件名 module.exports = { resolve: { extensions: ['.js','jsx'], //设置省略的后缀 mainFiles:['index','c…

文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学react之前先学习下webpack.前端有一系列的构建工具,如grunt.gulp都是,具体区别联系不做详述.Webpack:是一个解决模块的定义.依赖和导出工具,目的就是把有依赖关系的各种文件(HTML,CSS,JS)打包成一系列的静态资源构建成项目.scripts:是将命令替换成另一种写法,在命令比较…

开发环境就是在开发过程中为了方便配置的环境,生产环境就是开发完成即将上线的情况. 好了,说了句废话,切入正题. 在开发时,打包后的文件压缩成一团,报错调试的时候傻眼了有木有?每次做出修改需要到浏览器查看效果的时候,都要手动npx webpack或者npm run build手动进行打包,耗时又费劲有木有? 用几个工具配置开发环境(不能用于生产环境)解决这个问题: source map source map 可以将编译后的代码映射回原始源代码 截个官方图: 更多查看这里 具体用法: webpack…

Webpack安装 Linux系统默认已经安装了node&npm,但版本比较低,而且没法升级,可以重新下载Node然后通过软链接替换系统自带的node和npm; ln -s /path_to/bin/node /usr/local/bin/node ln -s /path_to/bin/npm /usr/local/bin/npm 参考:http://blog.csdn.net/dxywx/article/details/51396234 安装webpack # 安装到项目目录 npm inst…

webpack是什么? https://webpack.js.org/concepts/ https://code.tutsplus.com/tutorials/introduction-to-webpack-part-1--cms-25791 webpack是一个为现代javascript application而生的module bundler:模块打包器. 某种意义上说,webpack也是可以代替gulp,grunt等传统意义上的task runner,而webpack中的loader就来…

  #,Loaders干嘛的,webpack can only process JavaScript natively, but loaders are used to transform other resources into JavaScript #,Plugin System,webpack features a rich plugin system. Most internal features are based on this plugin system 提问:     我想知道L…

1.html-webpack-plugin 该插件主要作用是在release时,自动向index.html 文件中写入 <script>xx/xx/bundle.js</script>. 参数配置: output: { path: __dirname + "/",//代表webpack 打包后的文件保存路径 filename: 'bundle.js', //打包文件的名称 publicPath: './' //打包后的bundle.js文件,在写入index.h…

1.安装webpack npm install webpack -g 2.进入项目目录,初始化 npm init 3.将webpack安装到项目依赖中 npm install webpack --save-dev 4.创建一个webpack.config.js配置文件 module.exports = { // 需要编译的文件 entry:{ index1:'./src/index1.js', index2:'./src/index2.js' }, // 编译配置项 output:{ // 输出…

本文同步自我的个人博客:http://www.52cik.com/2015/12/04/learn-node-path.html path 模块是 node 用于整理.转换.合并路径的神器,只要是路径问题,都可以交给它处理. 但它仅仅是处理路径字符串,而不会去坚持或处理文件. path.normalize 路径整理 做项目时,往往都是基于相对路径,于是经常会出现类似这样的路径 path//upload/../file/./123.jpg. 当然这个是把所有坑都写到一起了,不过就算这样的路径,pa…

主要参考: https://blog.madewithlove.be/post/webpack-your-bags/ 起因: 作为运维狗, 对前端一窍不通但心向往之, 最近做一个Dashboard, 注意到 bootstrap, echarts, vuejs 都提供 npm 的下载, 最开始是手动复制粘贴 min.css, min.js 文件到静态目录, 后来觉得这实在是太low了, 然后才知道 webpack 这等神器. webpack基本原理 import stylesheet from '…

webpack 的目标 将依赖项分块,按需加载. 减少web app的初始加载时间. 使每一个静态集合都能够作为组件使用. 有能力集成第三方库,作为组件使用. 高度可配置化. 适用于大型项目. INSTALLING WEBPACK 在已安装node.js的情况下,输入以下命令行: npm install webpack -g SETUP THE COMPILATION 创建一个空的文件夹,分别创建以下文件: entry.js index.html js中写入如下内容: document.writ…

webpack集成了模块加载和打包等功能 ,这两年在前端领域越来越受欢迎.平时一般是用requirejs.seajs作为模块加载用,用grunt/gulp作为前端构建.webpack作为模块化加载兼容了amd/cmd模式,并且作为模块化的资源可以是js/css/image  coffeescript/sass/less  ES2015 modles TypeScript 等功能非常强大,作为前端构建工具还可以和grunt/gulp配合一起使用. 配置文件webpack.config.js也是非常…

市面上已经存在的模块管理和打包工具并不适合大型的项目,尤其单页面 Web 应用程序.最紧迫的原因是如何在一个大规模的代码库中,维护各种模块资源的分割和存放,维护它们之间的依赖关系,并且无缝的将它们整合到一起生成适合浏览器端请求加载的静态资源. 这些已有的模块化工具并不能很好的完成如下的目标: 将依赖树拆分成按需加载的块 初始化加载的耗时尽量少 各种静态资源都可以视作模块 将第三方库整合成模块的能力 可以自定义打包逻辑的能力 适合大项目,无论是单页还是多页的 Web 应用 webpack重点 ht…

转载http://zhaoda.net/webpack-handbook/module-system.html 转载http://www.cnblogs.com/vajoy/p/4650467.html webpack和gulp的区别 gulp是基于流的构建工具:all in one的打包模式,输出一个js文件和一个css文件,优点是减少http请求,万金油方案.webpack是模块化管理工具,使用webpack可以对模块进行压缩.预处理.打包.按需加载等. 安装 首先要安装 Node.js,…

从开发文件到生产文件   有一天我突然意识到一个问题,在使用react框架搭建应用时,我使用到了sass/less,JSX模版以及ES6的语法在编辑器下进行开发,使用这些写法是可以提高开发的效率.可是浏览器它本身是并不能够"理解"这些语法的呀.就像下面这张图:       在开发代码文件 --> 生产代码文件的转换过程中,我们到底需要做些什么呢?没错,这一切都和webpack(或gulp)有关:       转一张webpack官网的图,webpack能把less/sass文件,…

我说的这种图片路径错误是这样的,运行webpack-dev-server,一切正常,没有错误.当webpack之后,直接打开index页面,报错,图片找不到,找不到的原因是路径错误. 先看我的项目代码 webpack.config.js var Webpack = require("webpack"); var path = require("path"); module.exports = { entry: './js/entry.js', output: { p…

output: { filename: "[name].js", path:path.resolve(__dirname,"build") } 如果没有指定pubicPath,则引入路径如下 <body> <script src="b.js"></script> </body> 如果有指定publicPath output: { filename: "[name].js", pa…

webpack-dev-server插件 webpack-dev-server是webpack官方提供的一个小型Express服务器.使用它可以为webpack打包生成的资源文件提供web服务. webpack-dev-server 主要提供两个功能: 为静态文件提供服务 自动刷新和热替换(HMR) HotModuleReplacementPlugin插件 HotModuleReplacementPlugin主要用于代码热替换(具体用途还不清楚,因为没有研究通透吧) 一.webpack-dev-…

这个插件的两个作用: 为html文件中引入的外部资源如script.link动态添加每次compile后的hash,防止引用缓存的外部文件问题 可以生成创建html入口文件,比如单页面可以生成一个html文件入口,配置N个html-webpack-plugin可以生成N个页面入口 安装使用如下: 一.首先安装html-webpack-plugin插件 在cmd中打开项目,输入cnpm install html-webpack-plugin: 二.在webpack-config.js的plugin…

一般要优化网站的加载速度可以从缓存入手,利用缓存可以降低网络流量,减少访问请求,从而可以达到加快访问速度的目的. 但是,如果一旦将文件缓存,那么有更新的时候就不能及时更新,若要看到最新内容,那么就需要清除缓存重新加载,这样加载速度就会很慢,达不到优化网站加载的目的. 解决的办法是添加版本号,也可以说是在文件名上加个hash值,如果有更改的文件,那么hash值就会有变化,没有更改的文件,文件名就不变.有更新的时候就会加载最新更改的文件,其他没变动的文件就利用缓存减少没必要的加载,这样就可以优化加载…

官方文档说进行代码分离有三种方法: 入口起点:使用entry配置手动分离. 防止重复:使用CommonsChunkPlugin插件去重合分离chunk 注:在webpack4中,CommonsChunkPlugin已经被废弃,改用optimization.splitChunks 动态分离 但是在个人理解:2是对1的缺陷补充,所以其实就只有两种分离方法: 入口起点手动静态分离 动态分离 静态分离: index.js import _ from 'lodash'; function componen…

生产环境和开发环境的配置目标不一样,生产环境主要是让文件压缩得更小,更优化资源,改善加载时间. 而开发环境,主要是要开发更方便,更节省时间,比如调试比如自动刷新. 所以可以分开配置不同的开发环境,然后需要哪种用哪种. 配置流程实践记录: 新建项目文件夹 demo 初始化 npm init 安装 webpack 和 webpack-cli npm install --save-dev webpack webpack-cli 4.建立一个源代码文件夹src,打包文件夹dist.并在src中建立一个i…

什么是模块热替换? 这个功能会在程序运行过程中替换.添加或删除模块,而无需重新加载整个页面 有什么用呢? 保留在完全重新加载页面时丢失的应用程序状态. 只更新变更内容,以节省宝贵的开发时间. 调整样式更加快速 几乎相当于在浏览器调试器中更改样式. 总而言之,它最主要的速度就是加快开发速度. 启用模块热更新这个功能需要更新webpack-dev-server的配置和使用webpack内置的HMR插件. 例子: webpack.config.js const path = require('path…