webpack 学习总结
来源:互联网 发布:剪辑音乐软件手机 编辑:程序博客网 时间:2024/06/10 04:27
webpack
- 是一个【模块化管理工具】兼【打包工具】
- 是一个工具(和seajs,requirejs管理前端模块的方式是不一样)
- 在webpack一个文件就是一个模块!
seajs,requirejs
模块化!- webpack也能对前端资源进行模块化管理!
不是某个要在页面引入的js文件
是一个工具
webpack允许我们在前端代码像node代码一样去引入一个包(文件) webpack会把我们写的类似node的模块化方式,做转换,使其他能够以浏览器中运行
module.exports = '小明' // xx.jsrequire('./xx.js') // a.js
安装webpack
npm install -g webpack
带-g
参数表示全局安装!通过webpack来管理我们的代码,那么我们的代码一般是不会暴露到全局的!
基本使用
我们在前端代码像使用node代码一样用module.exports及require来管理(描述)模块的依赖关系, 但是这样的代码是不能直接在浏览器中运行的
var myjack = require('./jack.js')var myrose = require('./rose.js')console.log(myjack.money)
我们需要使用webapck来管理(转换)我们的代码,使其符合浏览器的规则!
webpack <入口文件名> <输出文件名>
webpack会把我们在代码所依赖的文件(通过require获取的文件)合并到一起!
并且【不会产生全局变量】(除非显示的通过window点一个属性)
通过配置文件的方式使用webpack
- 在项目目录添加:
webpack.config.js
文件 - 在文件中添加以下内容
// 这个webpack的配置文件 // 要求在这个文件中暴露一个对象 // 按照node的请求去写就可以了! module.exports = { // 这个属性表明,整个项目的入口文件是谁 entry:'./src/app.js', // 这个属性表示,我们项目通过webpack打包后的输出文件及输出路径 output:{ filename:'./dist/bundle.js' // 指定输出的文件名 } }
- 直接在当前目录的命令行,执行命令:
webpack
就可以了!
将css也合并到js代码中
css-loader 和 style-loader
- css-loader,把css合并到js中(没有添加dom操作,也就是没把css添加到页面中)
npm install css-loader --save-dev
- style-loader,把css-loader处理的结果添加到页面(dom)中
npm install css-loader@0.13.1 --save-dev
注意:这里的命令一定要指定版本号,否则出错
output:{ filename:'./dist/bundle.js' // 指定输出的文件名 }, module:{ loaders:[ // Loaders是提供了一些特定的功能 { // 表明我们(用到的loader)要处理的文件是什么 test:/\.css$/, // 要把指定的css加入到js中 // loader属性指定具体的loader,这个loader其实是一个npm外 // css-loader就是一个npm 包! // `npm install css-loader --save-dev` // css-loader只是把css代码加入到js代码(并没把样式添加到dom中) // style-loader 这个loader这为了把css-loader得到css样式添加到dom中 // // webpack会先调用!右边的包来处理我们的文件,然后把!右边处理的结果交给左边的包来处理! loader:'style-loader!css-loader' } ] }
less-loader
- 作用: 这个loader会读取匹配的less文件,然后把less文件内容转换为css内容
一般会配合css-loader 和 style-loader一起使用! - 注意,下载less-loader会缺少一个less包:
npm install less --save-dev
,这个需要另外单独安装!
require('./xxx.less') // 用到的less文件要引入才能生效!
module.exports = { entry: './src/app.js', output:{ filename:'./dist/bundle.js' }, module:{ loaders:[ { test: /\.less$/ ,// 匹配当前loader要处理的文件 // less-loader作用:是读取test规则对应的文件,然后把读取到的less文件内容转换为css内容 loader:'style-loader!css-loader!less-loader' } ] }}
sass-loader
- 安装:
npm install sass-loader --save
- 作用: 这个loader会读取匹配的scss文件,然后把less文件内容转换为css内容
- 注意,sass-loader的依赖包node-sass和webpack不会自动安装上
需要手动安装:npm install node-sass webpack --save-dev
url-loader
- 作用: 是能css中使用的图片进行处理,如果图片比指定的条件小,就转换为base64
如果比指定的条件大就不转换 - 注意,安装时会缺少一个file-loader包:
npm install file-loader --save-dev
这个file-loader里会对文件操作! - css: bg:url()
- 在css中有好小图标,可能有100个,浏览器会再发100个请求!
- 如果能够把这个100个请求合成1个,或者0个就更好了!
- 注意:只有小图片的时候才这样做
// base64
module.exports = { // 指定入口文件 entry:'./src/app.js', output:{ path:'dist',// path指定父目录,webpack会把path与filename拼接成一个路径 // 同时是指定默认文件的生成目录 filename:'bundle.js' }, module:{ loaders:[ { test: /\.css$/, loader:'style-loader!css-loader',// 从右往左执行! }, { test:/\.(jpg|jpeg)/, // 这里的./是相对于path属性指定的目录 // name参数指定如果不生成base64时,文件的输出目录及输出的文件 // [name]表示原文件名,[ext]表示源文件扩展名 // 如果不指定name参数,输入的图片名是随机的 // limit: 限制转换的大小 // 值的单位是字节,byte // 1byte = 8bit (位) 字节 // 1kb = 1024 字节 // 1M = 1024kb // 1000 loader:'url-loader?limit=12048&name=./img/[name].[ext]' } ] }}
babel-loader
npm install babel-loader --save-dev
- *注意:安装时还需要安装babel-core:
npm install babel-core webpack --save-dev
*- 如果是对es6进行请求转换,还需要安装:
npm install babel-preset-es2015 --save-dev
- 依赖于babel这个工具!,是在webpack中使用的,可以进行多种语法转换!
babel可以用来进行多种语法转换, - 写代码时,用es6,在写完之后,再用工具转换为es5
// 配置文件 module:{ // 这里是我们webpack打包用到的loaders loaders:[ { test:/\.js$/, // 也需要一些参数,babel不令是能转换es6,还能将react的语法转换成js loader:'babel-loader', query:{ // 这个es2015也是对应了一个npm 包 // npm install babel-preset-es2015 --save-dev presets:['es2015'] } ] }}
对第三方包进行分离
- 把我们项目用到的包(如果有第三方包,我们分打包合并!)
- 一个可以利用浏览器缓存对第三方包进行缓存!
- 其实就是我们自己写的文件打一个包,其他第三方我文件打一个包!
// 入口文件目录 entry:{ app:path.join(__dirname, 'src/app.js'), // 随便写一个属性,值为数组,数据中的元素是我们希望单独打包的第三方包的名字 vender001:['angular'] }, // 输入路径 output:{ // 输出的文件目录 path: path.join(__dirname, 'dist'), // 输出的文件名(也就是打包后的文件) filename:'bundle.js' }, // 这个属性里写上webpack中要使用到的插件 plugins:[ // 要使用webpack自的插件来分离第三方包 new webpack.optimize.CommonsChunkPlugin( // 第一个参数,就是我们在entry写的一个属性名 // webpack会自动读取对应的值,找到相应的包 'vender001', // 第二个参数,是第三方包单独打包后生成的文件名 'vender.js' ) ]
webpack 插件
自动打开浏览器插件(open-browser-webpack-plugin)
- github地址
创建index.html插件(html-webpack-plugin)
- github地址
// npm install html-webpack-plugin --save-dev const HtmlWebpackPlugin = require('html-webpack-plugin'); plugins:[ new HtmlWebpackPlugin({ template:'./src/index.html' // 指定模板,最终生成的html会生成到path属性对应的位置 }) ]
删除目录插件(clean-webpack-plugin)
- github地址
拷贝文件插件(copy-webpack-plugin)
- github地址
webpack 相关参数
- --watch,自动监视文件,重新打包
- --progress 在打包进可以看到进度
- -p 压缩js代码
- -d 生成js代码对应的.map文件(
当我们打调试工具时,浏览器会自动请求与压缩的js文件同级目录的js文件名.map文件
这个文件中的内容表示我们的代码是如何压缩的!)
阅读全文
0 0
- Webpack学习总结
- webpack学习常用命令总结
- webpack 学习总结
- 如何配置webpack(学习总结)
- webpack总结
- Webpack 总结
- webpack学习
- Webpack学习
- webpack学习
- webpack学习
- webpack学习
- webpack学习
- webpack学习
- 学习webpack
- webpack学习
- webpack学习
- webpack学习
- webpack学习
- 技术文章 | 三种常见的部署Kubernetes的方式
- 初始化Direct3D
- win10下安装nfs服务器
- iframe使用总结(实战)
- 京东无人机在西安发展落地战略
- webpack 学习总结
- c++ 如何获取系统时间
- 关于set global sql_slave_skip_counter=N 命令的解释
- HDU
- Maven中如何解决Cannot access central in offline mode?
- Android进阶之Gradle的高级用法
- 解决The SDK platform-tools version ((23)) is too old to check APIs compiled with API 23
- C++语言基础
- Spring Data(概述+hello world)