初识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都会打包成功,注意如果是模版打包绝对路径没有问题,相对路径需要处理<img src="${ require(‘../../assets/head.jpg‘) }">

(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官网

时间: 2024-10-29 19:08:29

初识webpack的相关文章

玩转webpack 全方位掌握webpack核心技能和优化策略

第一章:wepack与构建发展简史 (9讲)01 | 课程介绍02 | 内容综述03 | 为什么需要构建工具04 | 前端构建演变之路05 | 为什么选择webpack06 | 初识webpack07 | 环境搭建:安装webpack08 | webpack初体验:一个最简单的例子09 | 通过npm script运行webpack 第二章:webpack基础用法 (12讲)10 | webpack核心概念之entry用法11 | webpack核心概念之output12 | webpack核心

初入webpack

为什么需要构建工具? 通过caniuse我们了解到 现代浏览器对es6特性的支持程度: 由于现代浏览器对es6特性的支持度并不能说太高,为了兼容所以需要进行 es6语法的转换,除了此,三大框架的语法特征,例如转换JSX,双括号等, 还有其他如CSS前缀补全/预处理器,JS压缩混淆,图片压缩等. 前端构建演变 构建工具说明 YUI Compressor:https://github.com/yui/yuicompressor, YUI压缩器是一种JavaScript和CSS压缩器,除了删除注释和空

python全栈学习路线

查询目录 一,硬件                                                                    十一,数据库 二,Linux基础                                                           十二,前端 三,python基础                                                        十三,Django 四,python文件处理   

Webpack初识

1.安装 全局安装: npm install webpack -g 在项目目录下安装: npm install webpack --save-dev 打包文件基础命令: webpack source.js bundle.js 2.配置 在目录下创建webpack.config.js配置文件,另外也可以用--config指定配置文件:在配置文件用module.exports指定一个配置文件,各个配置参数都是以键值对的形式: (1) 入口配置entry:字符串/数组/对象 字符串:单个入口文件 数组

webpack打包初识

1.新建项目目录,目录名称webpack-test 2.进入新建的项目目录中(webpack-test) cd webpack-test 3.使用命令初始化目录 cnpm init 4.在3步骤基础上,会输出让你输入初始化目录的相关信息,你可以根据自己的实际情况进行输入,当然你也可以一路回车下去 5.使用命令安装webpack cnpm install webpack --save-dev 6.查看生成的目录结构 dir 7.根据项目需求创建相应的目录 源文件目录 mkdir src 静态资源目

webpack初识(biaoyansu)

1.是什么和为什么 在浏览器中的js之间如果需要相互依赖 src=a.js src=b.js src=c.js src=d.js 需要暴露出全局变量,而暴露出的这个全局变量是非常不安全的, 随着Node与NPM的产生, 如今的前端发展方向是全部使用js来写页面,如果使用规范比如import(es6规范)或者require(commonjs规范) 只要有入口文件,可以通过webpack来把这些a,b,c,d互相依赖的js打包成一个整体的bundle.js 2.安装 npm install webp

Webpack之初识

什么是webpack? 简单来说,就是模块打包机,主要分析项目的结构,根据你的配置将源代码转换发布到线上可执行的代码. 代码转换:TypeScript 编译成 JavaScript.SCSS 编译成 CSS 等. 文件优化:压缩 JavaScript.CSS.HTML 代码,压缩合并图片等. 代码分割:提取多个页面的公共代码.提取首屏不需要执行部分的代码让其异步加载. 模块合并:在采用模块化的项目里会有很多个模块和文件,需要构建功能把模块分类合并成一个文件. 自动刷新:监听本地源代码的变化,自动

Vue.js系列之项目搭建(vue2.0 + vue-cli + webpack )

1.安装node node.js环境(npm包管理器) cnpm npm的淘宝镜像 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装完成之后,打开命令行工具,输入 node -v,如果出现相应的版本号,则说明安装成功. npm包管理器,是集成在node中的,所以,直接输入 npm -v就会显示出npm的版本信息. 2.安装cnpm 在命令行中输入 npm install -g cnpm --registry=http://registr

初识Python,望君多多关照

在学习Python之前,我们接触过数据结构和网页制作.前者让我们学习如何把C语言运用的更加整齐规范,而后者让我们亲身学习如何运用所学,制作一个静态网页.通过这些课程的学习,让我对C语言产生了比较大的压力,以至于对编程.对这学期的Python课程都有一种如临大敌的感觉. 但是真的学习了这门课程,体会了编码过程中的一些固定运用方法和套路之后,也许过程中对这门课程隐隐约约产生了一点点朦胧的感觉,仿佛他也并没有想象中的那么困难,起码现在的学习让我认为,他可能没有C语言那么繁琐和麻烦.当然,以一个初学者的