00一、什么是webpack? 做用有哪些？
WebPack能够看作是模块打包机：它作的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用
Webpack的工做方式是：把你的项目当作一个总体，经过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的全部依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
做用：
一、模块化，让咱们能够把复杂的程序细化为小的文件;
二、相似于TypeScript这种在JavaScript基础上拓展的开发语言：使咱们可以实现目前版本的JavaScript不能直接使用的特性，而且以后还能转换为JavaScript文件使浏览器可 以识别；
三、Scss，less等CSS预处理器
00二、webpack与gulp、Grunt的区别javascript
ebpack和另外两个并无太多的可比性，Gulp/Grunt是一种可以优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优势使得Webpack在不少场景下能够替代Gulp/Grunt类的工具。
00三、webpack的打包流程css
webpack是创建在module之上进行打包的
css js img 都叫作module模块
00四、webpack官方配置文件html
00五、webpack的基本使用前端
一、全局安装webpack npm install webpack -g
二、查看版本号 : webpack -v
三、查看全局安装过哪些模块：npm list -g --depth 0
四、局部安装webpack : npm install webpack --save-dev
五、基础的打包方式 webpack 文件名 生成文件名
舒适提示：webpack4.0以上版本坑比较多，新手建议安装4.0如下版本
一、卸载默认： npm uninstall webpack
二、全局安装： npm install webpack@3.5.3 -g
三、局部安装： npm install webpack@3.5.3 --save-dev
00六、预热一:打包文件java
一、npm init -y 生成一个node包
二、局部安装webpack 前提全局已经安装完毕
三、创建webpack.config.js
四、配置webpack.config文件
output:{node
//占位符 知足线上地址的需求
publicPath:'html://cdn.com/'react
}webpack
00七、html-webpack-pluginweb
一、安装：npm install html-webpack-plugin
二、引入模块： const htmlWebpackPlugin = require("html-webpack-plugin");
三、在module.exports中的plugins中配置文件
plugins:[
new htmlWebpackPlugin()
]
四、new htmlWebpackPlugin中有不少属性 详情请参考官方文档
new htmlwebpackPlugin({
title:"若是可以安定，有谁又愿意颠沛流离",
//模板文件
template:'index.html',
//生成的文件名称
filename:"html-[hash].html",
data:new Date(),
minify:{
//删除注释
removeComments:true,
//删除空格
collapseWhitespace:true
}
})
扩展：如需在模板中调用htmlWebpackPlugin中的参数 可用如下方法 <%= htmlWebpackPlugin.options.属性名 %>
00八、html-webpack-plugin 高级应用npm
如须要生成多个html,而且引入不一样的js模块。咱们能够屡次调用 new htmlWebpackPlugin()
00九、babel
babel是一个编译javascript的平台，它能够编译代码帮你达到如下目的 一、让你使用最近的javascript代码(ES6 ES7) 而不用管新的标准浏览器是否支持 二、让你使用基于javascript进行扩展语言 例如react的jsx
babel的安装与配置
babel实际上是几个模块化的包，其核心功能位于称为babel-core的npm包中 webpack能够把不一样的包整合在一块儿使用，对于每个你须要的功能或扩展，你都须要安装单独的包
一、首先安装这些包 npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react
二、处理css的loader
npm install --save-dev style-loader css-loader sass-loader node-sass
二、babel的基本配置 详情请参考官网
module:{
rules:[
{
test:/\.js$/,
use:{
loader:'babel-loader',
options:{
presets:["@babel/env","@babel/react"]
}
},
exclude:__dirname+'node_modules'
}
]
}
include和exclude须要相对路径，因此include:__dirname +'./src/' 加前缀__dirname
0十、webpack配置跨域
devServer:{
proxy:{
'/api': {
target: 'http://www.baidu.com', //目标服务器地址
pathRewrite: { '^/api': '' },// 将/api开头的请求地址, /api 改成 /, 即 /api/xx 改成 /xx
changeOrigin: true// 是否修改来源, 为true时会让目标服务器觉得是webpack-dev-server发出的请求!
},
'/getData':{
target:'http://jd.com',
pathRewrite:{'^/getData':''},
changeOrigin:true,
}
}
}
0十一、module.exports 、exports的区别
module.exports和exports的区别就是var a={}; var b=a; 中a和b的区别。exports指向的只是一个引用
require返回的只是module.exports
nodejs不支持import 和 export
module.exports：是node中内置的一个导出模块的方法
0十二、webpack-dev-server
一、执行命令 webpack --watch 文件监听
二、也能够在package中的scripts中修改命令 build:"webpack --watch";
三、当执行命令 当文件发生变化的时候服务器会自动帮咱们重启命令
除此以外还有更好用的webpack-dev-server
一、全局安装 npm install webpack-dev-server@2 -g
二、在package.json里面修改scripts build1:"webpack-dev-server";
三、运行 npm run build1
四、若是在4.0.1中安装失败 须要安装 npm install webpack-cli -D
扩展：
webpack-dev-server：不会生成线上目录 例如咱们上面说过的build 而是放在内存中
webpack：打包上线