Webpack篇

开始着手项目打包的一些东西,还不是特别懂,一边学习,一边做笔记好啦。

1.webpack的概念。 Webpack 是当下最热门的前端资源模块化管理和打包工具。任何形式的资源都可以视作模块,通过 loader 的转换。 2.webpakc的安装。 (1)在Node.js  用npm 全局安装Webpack:  npm install webpack -g          通过webpack -h 测试。

(2)进入项目目录。通过npm init创建 package.json。安装webpack依赖 npm install webpack --save-dev。          使用命令webpack + xx(需要打包的js名称) + xx(打包后的js名称)。使用动态表达式require绑定js文件,加载依赖。

(3)打包css ,首先需要先安装loader : npm install css-loader style-loader --save-dev          1.特别注意如果引用css的时候,打包需要在路径中添加css-loader!,在运用到页面中需要添加style-loader!。          2.使用webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'语句就不需要在路径中引用那些loader了,在后面添加--watch进入监视者模式,--progress 可以看到打包过程,--display-modules 列出打包的模块,--display-reasons 列出打包的原因。

3.webpack的配置文件。 (1)简历项目webpack来配置文件。首先创建目录。

src里面还分别创建script、style文件。来放置js文件跟css文件。 dist 存放打包好的js文件。 (2)系统会默认搜索webpack.config.js这个配置文件, 或者使用 webpack --config +xx(配置文件名)来指定配置文件。 //模块化输出 module.exports = { //打包入口 entry: './src/script/main.js', output: { //打包文件放在哪里 path: './dist/js', //打包文件名 filename: 'bundle.js' } } 在有配置文件的状态下,只需要运行 webpack就能编译打包。 (3)如果需要加特别的参数来输出,需要在package.json文件里面配置。 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", //可以在这里添加你想要输出的命令。 "webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons" }, 使用 npm run webpack 编译。

(4)配置参数的详解 1.entry 表示入口文件的路径。它有三种写法针对不同的情况。          1.只写一个单一的路径:entry: ‘./路径/.xxx.js’’          2.写一个数组: entry:【‘./路径/.xxx.js’,‘./路径/.xxx.js’’】(这个也只打包了一个文件)          3.可以写 一个对象key 加 value的形式:注意这种写法需要修改 output.filename值才有效果。 entry: { page1: './page1', page2: ['./page2','./page3'] } 2.output.filename 这里不要写绝对路径且不要写路径,只需要写文件名。 (1)如果entry入口文件有第三种情况的写法,需要更改filename的文件名。 (2)name 输出跟入口文件同样的文件名。 (3)hash 就是本次编译打包的hash值。(两个hash值是一样的) (4)chunkhash  是系统的hash值,也可以理解为版本号,只有当文件修改了再打包的文件才会更新这个值。

3.插件。(更新html,因为每次打包好的js文件名是不一定的,所以html引用的js的名字不确定,所以需要插件来解决这个问题。) 1.先案例一个插件推荐网站。插件推荐(随便百度的)(1)先使用命令安装插件 npm install html-webpack-plugin --save-dev. (2)在配置文件中引用:var htmlWebpackPlugin = require(‘html-webpack-plugin’)。 (3)在配置文件中添加一个属性: plugins: [ new htmlWebpackPlugin({ //如果不加参数只是生成一个新的html文件。 //设置模版 template: 'index.html', //更改html的名字,跟更改打包文件名相同。 filename: 'index-[hash].html', //还可以制定生成的脚本放在那个地方 inject: 'head' }) ] context:上下文选项用来决定根目录(既绝对路径)的入口文件。

(4)更复杂的功能。把plugins里添加的属性显示到html文件中。          在html文件中写类似js模版语言,需要用<%= %>的格式包裹起来。如果是编写js代码的话就不需要中间的= 号。          搜索到一个每一个属性详细的配置,需要的可以过来看看html-webpack-plugin         1.既然能用代码的形式拿到数据,知道了结构,那么换一种方式就可以用模版语言的方式引用js文件。             在html标签里面要用 <%= htmlWebpackPlugin.options.xx(这里写属性) %> 另外,需要打印属性跟值的时候加上JSON.stringify解析成字符串。          2.在output.publicPath:这里可以写上线的地址前缀。          3.多应用的页面处理。            (1)在entry添加多个入口文件。            (2)新建相同个数的new htmlWebpackPlugin,设置不同的文件。            (3)为了解决生成的html载入对应的js文件,可以使用两种方法:                      1.使用chunks浏览器传参的方式:chunks:【‘a’】。                      2.使用excludeChunks排除串口的方式:excludeChunks:【‘b’,‘c’】。            (4)减少http请求,把js初始化代码直接写到页面中。                    1.htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)获取的值没有publicPath值。                    2.拿到这个值之后使用webpack官方给的api  compilation.assets[包裹获取的值].source() 这样就获取的不是地址,而是js内容了。                    3.使用模版语言判断引用js。                    4.特别注意inject是开启是否自动生成<script>标签。excludeChunks排除串口在 <script>模块生成也能能起到一个筛选的作用。

(5)loader。 1.loader 的三种配置方式。         1.loader in require 直接 在require文件的时候在路径中添加对应的loader。         2.CLI  在编译的的语法中添加 --module-bind + 对应的loader。         3.Configuraion 在配置文件中添加一个数组,添加对于的loader。 2.Configuraion 配置步骤。 1.先在Babel安装好babel-loader。npm install --save-dev babel-loader babel-core 2.配置presets属性,转换为Latest(包含es2015、2016、2017),安装Latest插件。 //配置loader module: { loaders: [ { //匹配以js结尾的文件 test: /.js$/, //使用babel-loader loader: 'babel', //为了解决加载速度的问题,可以排除不要扫描的文件夹 exclude: './node_modules', //有时候排除了也无法解决问题,那就只能指定文件夹 include: './src/', //如果上面的两个方法也没效果,使用node的方法指定绝对路径。 //1.引用node的api ,var path = require('path'); //2.exclude: path.resolve(__dirname , 'node_modules'),include: path.resolve(__dirname , 'src'), //用query参数指定插件解析js。 query: { //解析js的特效 安装latest npm install --save-dev babel-preset-latest presets: ['latest'] } } ] }, 3.使用配置文件loader css。 *npm 官网 npm(1)打包自动对css做处理,安装postcss-loader后处理器  npm install postcss-loader --save-dev          npm install autoprefixer --save-dev 添加css浏览器前缀。 (2)直接添加新的对象,配置。如果有css文件中import其他css,修改成css-loader?importLoaders=1就好了。 (3)安装less npm i less   安装less-loader npm i less-loader --save-dev sass同理,如果有import文件,不需要做处理。

4.使用配置文件loader 模版文件。 (1)不管是哪种模版先要下载对应的loader:npm install html-loader --save-dev。 (2)在配置文件loaders中做对应的设置。 (3)ejs 跟tpl格式是相同的。

5.图片的配置。 (1)安装file-loader打包图片,不管是css还是原HTML都会打包成功,注意如果是模版打包绝对路径没有问题,相对路径需要处理 (2)安装url-loader。 { test: /.(jpg|png|gif)$/i, loader: 'url-loader', query: { //设置一个值,如果大于这个值已原来的格式打包,小于则打包成best64的图片。 //best64的图片每一张都是独立的,所以导致js、html文件变得很大,正常的图片的好处就是会有缓存。 limit: 40000, //路径/ 名字/ hash/ 后缀名 name: 'assets/[name]-[hash]-[ext]' } } (3)压缩图片image-webpack-loader 建议跟file-loader 或者 url-loader搭配使用。 { test: /.(jpg|png|gif)$/i, loaders: [ //简写,可以把写成一个请求的方式。 'url-loader?limit=2000&name=assets/[name]-[hash:5].[ext]', 'image-webpack-loader' ] } 还有很多其他图片的配置,详情见npm官网。 顺便贴上webpack的中文文档,便于学习。webpack中文文档webpack的基本使用就到这里,有空我再写一篇打包vue的笔记。大家有需要的可以找我,或者给我一些意见。1098271199Q。

收藏 0分享浏览 1066
3年前
跟帖
  1. 前言   本文把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人们对于前端只有三大块(html、css、js)的认识——做web前端需要的比这三大块要多得多。   在看内容之前,先看一下这个知识框架的预览图。图太大不好展示,看不清除,可在此下载清晰版:http://pan.baidu.com/s/1hqIUvUc (内有整个知识体系的图片和xmind文件)   
  2. 分类   所有知识框架,那肯定是一个结构型的展现,就是一棵树。web前端的知识点非常多,也非常散,需要好几层结构来组织这个体系,否则就会显得很乱。那么如何组织、把谁和谁放在一块儿?这是真正值得我们去思考的,你也可以自己来思考一下这个问题。   在我总结的这个知识框架中,首先第一层我划分为:理论知识,类库框架,编码开发,运行环境。如下图:      接下来给大家解释一下:   这个图要从下往上看,为何?——因为下面是上面的基础; 首先,我们需要一定的理论知识,不管是你听别人讲授、自己看书还是网上淘资料,你都需要一定的理论知识,每一种程序开发,都避免不了。 第二,有了这些理论知识我们就可以编码了——不错——but,没有人能抵挡住第三方框架和类库的诱惑,例如jquery; 第三,有了这些理论知识和协助我们的类库框架,我们就可真正的编码了。大家可能以为编码开发不就是写代码吗,还有啥?——这里面道道多着呢; 最后,开发程序的目的,最终是为了能高效、稳定的运行在相应的环境中,这其中又有哪些事情需要我们去做?请期待;
  3. 理论知识 包括“软知识”和“硬知识”   “软知识”和“硬知识”大家可能觉得词陌生,其实我一说大家就能明白。    所谓“软”的就是能在各个程序开发中都用到的,算是基本功、内功,例如数据结构、算法、设计模式、面向对象等等; 所谓“硬”的就是能直接用于本程序开发的。用C语言你就得学C语言语法,此时学java没用。我们web前端开发所需要的硬知识其实都包含在三个标准里面:http标准、W3C标准和ECMAScript标准;
  4. 聊一聊web前端开发中的“硬知识”   “软知识”的内容非常多,也是我们大学时代学习的重点(没学好是另回事儿,毕业再恶补)。我们本次主要讨论的是web前端这一个方向,因此就点到为止,让大家知道这些知识也在知识体系中扮演重要角色。   刚才说道,硬知识有三个标准:http标准、W3C标准和ECMAScript标准,那咱们就挨个聊聊这三个标准。 交流:477706497 验证:管
沙发
说几句
广告位 点击查看投放指南

我的收藏