-
webpack安装：
cd/imooc
新建文件夹 mkdir webpack-test
cd webpack-test
初始化 npm npm init
安装 webpack npm install webpack --save-dev
（--save：dependencies运行时依赖；--save-dev：devDependencies是开发时的依赖）
webpack天生是不支持css类型的，因此处理css文件需要依赖loader 安装 loader npm install css-loader style-loader --save-dev require('style-loader!css-loader!./style.css')
命令行指定 webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch(参数：自动更新和打包)
查看全部 -
webpack模块打包工具
查看全部 -
插件 html-webpack-plugin
查看全部 -
安装与卸载：
删除本地（局部）webpack-cli
npm uninstall webpack-cli
删除全局webpack
npm uninstall -g webpack
删除本地webpack
npm un webpack
安装webpack：
1、创建一个新的本地项目目录名为webpack-demo
mkdir webpack-demo
2、进入目录
cd webpack-demo
3、创建package.json文件
npm init -y
4、安装webpack
# 要安装最新版本或特定版本，请运行以下命令之一：
# 第一个安装方式默认安装最新版本
npm install --save-dev webpack
# 第二个安装方式是安装你需要的版本
npm install --save-dev webpack@
5、安装webpack-cli
npm install --save-dev webpack-cli
# 不要忘记webpack4.+开始webpack-cli是必备的哦
6、检查webpack是否安装成功
node_modules/.bin/webpack -v
# 执行了这个命令以后会输出一个版本号
# 因为webpack在不断更新所以我们的版本号会有点区别，不是什么问题
测试打包：
#前面是打包文件的名称，后面的是打包后的名称
webpack hellow.js hello.bundle.js
查看全部 -
中文官网:https://webpack.docschina.org/
中文文档:https://webpack.docschina.org/concepts/
定义:一个模块的打包器
(目标)功能:
1、切分依赖树(切分到不同的代码块,按需加载,跟懒加载概念类似)
2、保持初始化加载时间更少
3、任何一个静态资源,都可被视为一个模块在项目中被引用
4、整合第三方类库,并把第三方类库视为它的模块在项目中引用
5、可以在整个项目打包的每个过程中自定义想做的事
6、适合大型项目
跟其他打包工具的区别:
1、代码分割
2、loaders概念
3、插件系统,模块热更新特性(提高开发和调试效率)
查看全部 -
巧克力据统计 气球图查看全部
-
第一课查看全部
-
改变资源文件引入形式，提高加载效率
采用url形式引入资源文件，页面会多次通过http请求资源文件，一定程度上影响页面加载速度，可以将文件内容直接引入代码中来优化性能。
注意：将htmlwebpackPlugin中的inject设置能false，取消自动注入
查看全部 -
多页面入口配置
查看全部 -
设置打包压缩规则
查看全部 -
打包路径修改，若不设置publicPath则使用相对路径
查看全部 -
html文件中直接使用htmlWebpackPlugin
htmlWebpackPlugin.files：获取打包后的文件信息
htmlWebpackPlugin.options：获取package.json中htmlWebpackPlugin的全部属性
注意：通过这种方式注入js引用，应将inject改为false，否则引用文件会重复生成。
查看全部 -
html-webpack-plugin其他配置
filename：指定html打包后的文件名称
template：指定打包html模板，将基于模板进行打包
inject：指定自动生成文件位置
查看全部 -
使打包后的文件存放到相应的目录结构中
查看全部 -
使用webpack插件html-webpack-plugin自动化生成项目中的html页面
命令：npm install html-webpack-plugin --save
在webpack.config.js中配置template，可使打包后的index.html基于制定文件自动生成关联js或css引用，能够有效避免因hash变化而每次都需改动引用路径的问题。
查看全部
举报