webpack

webpack

1. 前端的工程化工具

• grunt
  • 资源打包
  • 单元测试
• gulp
  • 流式操作工具
  • 资源打包
• browserify(webpack前身)
• webpack 【 主流 】
  • 资源打包工具， 比如 js文件打包压缩 ， img 打包压缩 。。。
  • 可以自动解决模块化依赖问题
  • es6模块化

2. 前端的环境
   • 开发环境 localhost:3000
   • 生产环境
   • 测试环境
   • 预发布环境
   • 上线环境
   • 开发环境 和 生产环境 都是有前端静态服务器来提供
   • 测试环境 本地客户端服务器提供
   • 预发布和上线环境是 nginx
3. webpack.config.js配置
   1. 单页面
      • 入口文件
        entry: 相对路径
   • 出口文件
     • 配置hash

output: {
path: path.resolve(__dirname,'dist'),
filename: 'js/app_[hash:6].js'
}

• 问题： 为什么要跟hash?
  - 版本迭代的时候， 不进行文件的覆盖
• 转换器： 将某一类型的文件转成另一个类型文件的一个工具，我们常用loader来表示
• webpack中 ， 所有其他类型文件全部都要js文件
  • 举例： css文件
  • 所有的loader用一个module的配置项表示

module: {
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader'] //注意： 这两个loader的顺序不能颠倒
} //每一个对象表示一个类型文件的转换器
]
}

2. 多页面 ： 指的就是多个入口文件

• 修改入口配置

entry: {//多页面
// key: value key就是入口文件的名称， 值就是入口文件的路径
index: './src/index.js',
app: './src/app.js'
},

• 修改出口配置

output: {
path: path.resolve(__dirname,'dist'),
// filename: `js/app_[hash:6].js`
filename: 'js/[name]_[hash:6].js'
},

3. 自动解决模块依赖问题

总结：

1.先用npm i webpack webpack-cli -g
2.npm info webpack查看版本
3. webpack --mode development
4.webpack 入口地址 --mode development 指定出口
4.webpack aa/index.js --mode development bb/index.js 前面自定义//有问题
这时候我们就去按照官网来弄 ，建一个webpack.config.js文件
按照文档一步步来，一开始做单文件的，需要配置环境mode：'development
做css转换为js需要下载 npm install style-loader -D
在写webpack前端服务器时出现一些错误，下载了webpack，但是一直报错说没有下载（Error: Cannot find module ‘webpack’），问题解决是没有本地下载webpackcnpm
cnpm i webpack webpack-cli -D 或者分开装 然后就运行

1. 什么叫做优雅降级， 什么叫做渐进增强？
- 优雅降级指的是， 先进行高版本开发， 然后向下兼容
- 渐进增强指的是， 先进行低版本稳定开发， 然后在进行高版本技术的引用
2. css代码抽离（将src目录css文件打包到dist目录中， 并且会自动在index.html中引入link）

• 先安装
  cnpm i extract-text-webpack-plugin -D
• 在webpack.config.js中引入
  var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
• 在css的loader转换器中进行使用

module: {
rules: [
{
test: /\.css$/,
use: ExtractTextWebpackPlugin.extract({
use:'css-loader'
})
}
]
},
plugins: [
new ExtractTextWebpackPlugin('css/[name]_[hash:6].css')
]

3. 图片打包
   • base64 将数据量较小的图片（4K以下）转成 字符编码 ， 它可以减少http请求， 从而加快页面加载速度
4. 静态资源拷贝
5. 配置文件抽离
   • 创建一个config目录，然后在里面新建两个webpack配置文件
   • webpack.config.dev.js
   • webpack.config.prod.js
   • 修改package.json中npm脚本命令

"dev": "webpack --mode development --config config/webpack.config.dev.js",
"build": "webpack --mode production --config config/webpack.config.prod.js",
"server": "webpack-dev-server --mode development --config config/webpack.config.dev.js"

• 修改配置文件中的路径，
• 将相对路径， 修改为 磁盘路径

6. 错误资源定制
7. 精确找到错误源代码位置
   devtool: 'source-map'