webpack学习笔记

webpack

新建项目

webpack-study

cd到项目目录

npm init  (-f)

全局安装webpack

npm install webpack -g

在项目本地安装webpack

npm install webpack -D

打包

webpack 要打包的文件  打包的输出文件

在项目的根目录下创建webpack.config.js

// 这个配置文件 其实就是一个js文件 通过node中的 模块 向外暴露一个配置对象
        const path = require('path'),
        module.exports = {
          // 需要指定入口 和 出口
          entry: path.join(__dirname, './src/main.js') // 入口 表示要打包哪个文件
          output: {
            path: path.join(__dirname, './dist'),
            filename: 'bundle.js' // 指定输出的名称
          }
        }

• 运行webpack 发现没入口出口
• webpack会去项目根目录找webpack.config.js
• 解析webpack.config.js 获得配置对象
• 拿到配置对象的入口出口 并打包

使用webpack-dev-server来实现自动打包编译功能

• 把工具安装到项目的本地开发依赖

$ npm install webpack-dev-server -D

• 安装完毕后 这个工具的用法和webpack用法一样
• 由于,我们是在项目中,本地安装的webpack-dev-server, 所以无法把他当做脚本命令在powershell终端中执行;
  (只有那些 安装到全局 -g的工具, 才能在终端中正常执行)
• webpack-dev-server 如果想要正常运行, 要求在本地项目中 必须安装webpack(哪怕全局安装了也是,必须本地安装一次)
• webpack-dev-server 帮我们打包生成的 bundle.js文件, 并没有存放到实际的物理磁盘上, 而是直接托管到了电脑的内存中, 所以在项目根目录中找不到这个打包好的bundle.js
• 我们可以认为 webpack-dev-server 把打包好的文件, 以一种虚拟的形式, 托管到了项目的根目录中, 虽然看不到它, 但是可以认为 dist src modemodules 平级 有一个看不见的文件叫做bundle.js

package.json

"scripts": {
   "test": "echo \"Error : no test specified \" && exit 1",
   "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"  // 代表自动打开浏览器 端口3000 以src里的index.html为首页 打开  --hot 增量以补丁形式打包进来 并且浏览器无刷新重载
}

• 写好之后 npm run dev

把html页面也保存到内存中

• 安装

npm install html-webpack-plugin -D

• 在webpack.config.js中引入html-webpack-plugin

// 只要是插件 都一定要放到plugins节点中去
const webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin')

• webpack.config.js中的配置插件的节点中 创建一个插件

plugins: [
  new htmlWebpackPlugin({
    template: path.join(__dirname, './src/index.html'), // 指定模板页面, 将来会根据指定的页面路径,去生成内存中的页面
    filename: 'index.html'  // 设置生存的内存页面的名称
  })
]

• 当使用html-webpack-plugin之后, 我们不在需要手动处理bundle.js的引用路径了,因为这个插件已经帮我们自动创建了一个合适的script,并且引用了正确的路径
• webpack默认只能打包处理js类型的文件, 无法处理其他非JS类型的文件,如果非要处理如CSS的文件,我们需要手动安装一些合适的第三方loader加载器

// 1. 如果想要打包处理css文件, 需要安装 
npm install style-loader css-loader -D

// 打开webpack.config.js文件 在里边新增一配置节点module, 它是一个对象, 在这个module对象身上有一个rules属性, 这个rules属性是个数组 这个数组中存放了所有第三方文件的匹配和处理规则.
module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },  // 配置处理 .css文件的第三方loader规则
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 配置处理 .less文件的第三方loader规则
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=8192' }, // 配置处理 .jpg .png等图片 因为只有一个loader 不用数组
            // limit给定的值是图片的大小, 单位是byte字节, 如果图片小于limit 则会转为base64, 如果大于等于limit就不会转为base64字符串
        ]
    }

webpack处理第三方文件类型的过程

1. 发现这个要处理的文件不是JS文件, 然后就去配置文件中查找有没有对应的第三方loader规则.
2. 如果能找到对应规则, 就会调用对应的loader处理这种文件类型
3. 在调用loader的时候 从后往前调用
4. 当最后的一个loader调用完毕, 会把处理的结果, 直接交给webpack 进行打包合并, 最终输出到bundle.js中去

最后项目的目录应该是这样的

Screen Shot 2018-12-21 at 9.43.18 PM.png