学习webpack(二)

1.在webpack.config.js中写入以下代码

var path = require('path');      // 导入路径包
module.exports={ entry:'./src/script/main.js',//入口文件 output:{ path:path.join(__dirname, 'dist'),// 指定打包之后的文件夹 filename:'bundle.js' // 指定打包为一个文件 bundle.js }
}

运行：webpack 即可

2. entry可以设置两个参数['./src/script/main.js','./src/script/a.js']

entry也支持对象的写法

var path = require('path');      // 导入路径包
module.exports={ entry:{main:'./src/script/main.js',//入口文件 a:'./src/script/a.js'},output:{ path:path.join(__dirname, 'dist'),// 指定打包之后的文件夹 filename:'bundle.js' // 指定打包为一个文件 bundle.js }
}

3.这样有个缺点，打包后就只有一个文件bundle.js ; 下面是改进的方案

var path = require('path');      // 导入路径包
module.exports={ entry:{main:'./src/script/main.js',//入口文件 a:'./src/script/a.js'},output:{ path:path.join(__dirname, 'dist'),// 指定打包之后的文件夹 filename:'[name]-[hash].js ' // 指定打包为一个文件 bundle.js }
}

4.由于打包后的文件个数不确定，所以html中引入的文件不定固定为bundle.js

解决方案：引入插件 html-webpack-plugin

5.入口多个js文件，打包后html中分类显示（[name]-[hash]）

6.可以在html中通过<%=%>语法获得htmlWebpackPlugin插件的连个参数（files,options）,循环遍历可以显示

打包后就会显示

这样就可以在html网页中分类显示js的位置，是在body中，还是在head中

7.将打包的地址替换为上线的地址

打包后：

在plugins中增加minify属性，就是压缩html代码

删除注释和空格

plugins:[new webpack.optimize.UglifyJsPlugin(), // 用于压缩js文件new htmlWebpackPlugin({ // 打包的模板套用根目录的index.html template: 'index.html',title:'webpack is good',date: new Date(),inject:false,  // 打包后的js文件放在html的header标签中minify:{ // 对当前生成的html文件进行压缩removeComments: true,  // 删除注释collapseWhitespace: true // 删除空格}})     ]

打包后：

学习webpack(二)相关推荐

React学习笔记_从create-react-app学习webpack
从create-react-app学习webpack 更多干货分布式实战(干货) spring cloud 实战(干货) mybatis 实战(干货) spring boot 实战(干货) Reac ...
css中怎么加入立体模型,CSS学习笔记二：css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
语义分割：基于openCV和深度学习（二）
语义分割:基于openCV和深度学习(二) Semantic segmentation in images with OpenCV 开始吧-打开segment.py归档并插入以下代码: Semanti ...
qml学习笔记(二)：可视化元素基类Item详解（上半场anchors等等）
原博主博客地址:http://blog.csdn.net/qq21497936 本文章博客地址:http://blog.csdn.net/qq21497936/article/details/7851 ...
webpack 占位符_通过示例学习Webpack：占位符图像模糊
webpack 占位符 by Kalalau Cantrell 通过Kalalau Cantrell 通过示例了解Webpack:占位符图像模糊 (Learn Webpack by Example: ...
Mybatis底层原理学习（二）：从源码角度分析一次查询操作过程
在阅读这篇文章之前,建议先阅读一下我之前写的两篇文章,对理解这篇文章很有帮助,特别是Mybatis新手: 写给mybatis小白的入门指南 mybatis底层原理学习(一):SqlSessionFac ...
[转载]dorado学习笔记(二)
原文地址:dorado学习笔记(二)作者:傻掛 ·isFirst, isLast在什么情况下使用?在遍历dataset的时候会用到 ·dorado执行的顺序,首先由jsp发送请求,调用相关的ViewM ...
Membership学习（二）membership入门
Membership学习(二)membership入门 --不写一行代码在asp.net中实现用户验证管理系统这篇文章我们将实现一个简单的网站,在网站中实现用户的身份验证,创建用户,修改密码还有限 ...
appium学习【二】：用try捕获异常后，用例的执行结果为pass
appium学习[二]:用try捕获异常后,用例的执行结果为pass 参考文章: (1)appium学习[二]:用try捕获异常后,用例的执行结果为pass (2)https://www.cnblog ...

学习webpack(二)

学习webpack(二)相关推荐

最新文章

热门文章