webpack简介
中文文档地址
https://www.jqhtml.com/7626.html
是一个javascript应用的静态模块儿化方案，主要包含模块和打包。
类似工具 grunt/gulp、rollup
他们把AMD、CMDCommonJs、ES6进行转化，转化成浏览器能识别的代码或文件，这样就可以做到一个文件一个模块。webpack是为了模块化开发而使用的，文件压缩、依赖是基本的功能。
简要描述：对引用的js文件进行打包，需要的函数方法就加载进来，不需要的就不加载避免为了使用一个方法要引用一整个js文件
和grunt/gulp对比
grunt/gulp的核心是Task任务，前端自动化任务管理工具，他们配置定义任务流然后依次执行任务打包成可以放到服务器上的代码。
如果前端依赖很简单，没有模块化的概念只需要很简单的合并依赖、压缩代码就可以使用这种，他缺点是没有模块化的概念。
webpack安装
依赖于node环境需要先安装node（自带npm）
然后使用命令行
npm install [email protected] -g //全局安装
npm install [email protected] --save-dev //局部安装
然后开启powershell让电脑可以执行脚本,因为webpack打包要执行脚本
set-ExecutionPolicy RemoteSigned
Y
全部学习完成后的配置文件，如果出现版本错误请尝试指定版本安装
配置
项目目录
案例准备
使用
如何进行编译打包
webpack ./src/main.js ./dist/bundle.js
意思是将mainjs打包到dist的bundlejs文件
然后在html中引用打包后的文件即可
两种打包方式
因为webpack 2中不允许混用import和 module.exports ,
所以稳妥的方式统一使用一种方式
注意：更新代码需要重新编译
webpack.config.js
创建并编译
这个名字是webpack的配置文件，也可以修改但需要设置文件名称，最好使用默认的
const path = require('path')
module.exports = {
//导入入口，提供者
entry: './src/main.js',
//导入出口，输出位置
output:{
path:path.resolve(__dirname,'dist'),//node默认使用当前路径
filename:'bundledefault.js'
}
}
如果path路径解析不了可能是npm 没有初始化，没有初始化之前需要写绝对路径
终端命令行中输入 npm init（如果有中文或者特殊字符还需要起别名）
然后会生成package.json
再次命令行执行webpack就会按照配置生成js文件
与npm命令结合
script位置是可以用 num run这种方式调用的命令
例子：当更改config需要重新打包就可以在这里添加命令
注意：
- script里添加的命令默认优先级先从本地查找命令执行，比如webpack有全局的和局部的如果两个命令一样则执行局部的，优先使用node_modules/bin目录下的命令
- 如果安装了全局和局部两个webpack则会生成下边的目录结构和内容
loader使用
参考网址：
https://www.webpackjs.com/loaders/css-loader/#%E5%AE%89%E8%A3%85
注意
- 每次更新配置需要重新打包
- 注意cssloader和styleloader引用的顺序，因为webpack读取是从右往左加载，需要先加载css再去渲染
- 一旦出现版本错误，可以根据我配置文件中的版本恢复，更改了配置文件使用 npm install重新编译一下
cssloader
说明：
cssloader只负责加载css并不负责渲染界面
安装
注意： 版本有对应关系，如果loader版本过高会出现打包失败
- 写一个css文件
- 安装cssloader
npm install --save-dev css-loader
-
增加配置文件
-
引用css
-
检查版本是否正常
-
重新编译 webpack
styleloader
说明：
将加载进来的css文件渲染到界面
安装
注意： 版本有对应关系，如果loader版本过高会出现打包失败
- 安装
npm install style-loader --save-dev
-
增加配置文件注意顺序
-
查看版本小心版本过高错误
-
重新编译 webpack
lessloader
说明：
less是css预处理语言，可以简化css代码
安装
-
写一段代码
-
执行安装
npm install --save-dev less-loader less
- 增加引用
- 增加配置
- 重新编译 webpack
urlloader
说明：
使用背景图片则需要使用urlloader
安装
- 安装
npm install --save-dev url-loader
- 增加引用
-
增加配置
-
重新编译 webpack
babel loader
说明：
为了更好地兼容性，ES6转化为ES5
安装
- 安装
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
-
配置
-
重新编译打包
webpack配置vue
安装
npm install vue --save
引用vue
runtime-only错误
runtime-only版本是不可以构建带有template的js代码的
切换到runtime-compiler版本
添加如下配置
el和template配合
el表示使用哪个容器（一般为div），然后template会替换掉原来div容器中的html代码
vue文件使用
安装vue-loader vue-template-compiler
因为vue文件并不能被解析成js文件，所以需要解析器vue的解析器和template的解析器
npm install --save-dev vue-loader vue-template-compiler
vueloader高版本开始使用需要安装插件，所以更改一下版本
重新执行 npm install
如果出现 vue-template-compiler 和vue版本不一致则重新选择一样的版本就可以了
例如全部改成2.5.1版本
npm install --save-dev [email protected] [email protected]
省略扩展名
增加配置省略扩展签名
联想
通过上面的操作，大致了解了组件与组件之间互相导入使用的方法和规则，这样就可以互相引用模块儿化开发
plugin使用
BannerPlugin
安装了webpack之后就可以直接使用的插件，用于编译后的js代码头部注释
然后build
html-webpack-plugin 宝宝html插件
安装，打包html代码的插件
npm install [email protected] --save-dev
配置
他会将当前webpack打包的js自动装配进入指定的html文件当中
uglifyjs-webpack-plugin混淆插件
npm install [email protected] --save-dev
注意插件执行顺序
比如当前插件的执行顺序是先执行混淆再执行banner注释
搭建本地服务器
他会自动编译你修改的代码，实时更新代码
安装开发时服务
npm install --save-dev [email protected]
增加配置
增加脚本
执行命令
npm run server
抽离文件
安装插件
npm install webpack-merge [email protected]
github demo地址
github 例子地址https://github.com/1142235090/study_vue