webpack学习之webpack的基本配置

webpack 打包工具 grunt gulp;

• 代码转换
  • less/sass --> css
  • es6/es7/es8 --> es5
  • ts --> js
• 压缩文件
  • 压缩JS、CSS
  • 图片转为base64
• 代码分割：提取公用代码
• 模块合并：把多个模块合并
• 自动刷新（热更新）：代码改变，自动刷新页面

模块化开发

• 单例模式（高级单例模式：闭包返回一个对象）
• commonJS 规范（node）：每一个文件都是一个单独的模块（浏览器不支持）
  导出：module.exports
  引入：require
• esModule：每一个文件都是一个单独的模块（浏览器遵循的规范）
  导出：export/ export default（一个文件只能有一个默认导出）
  引入：import/import {xx} from ‘xx’/import(xx)

webpack是基于node开发的，所以遵循commonJS规范

• 导出：module.exports
• 导入：require

webpack安装

• 先初始化项目：npm init -y
• 安装webpack和webpack-cli：npm install webpack webpack-cli -D

webpack零配置使用

• 创建src文件夹：在项目根目录下创建src文件夹
• 在src目录下创建 index.js 文件
• 如果node版本在5以上，运行命令：npx webpack
• 如果要指定打包环境：npx webpack --mode development/production
• 或者去 package.json文件的 srcipts 下面配置命令，例如：“dev”: “webpack --mode development”
  配置过命令之后打包用：npm run dev

webpack配置文件

• 在项目根目下创建 webpack.config.js 文件
• 该文件默认导出一个对象 module.exports = {}
• 对导出的这个文件进行相关的配置

生产环境和开发环境配置抽离

• 创建开发环境配置文件：webpack.dev.js
• 在package.json中配置命令：“命令”: “webpack --config 文件名”
• 打包：npm run 命令

webpack常用插件（plugins）

由于插件可以携带参数/选项，必须在 webpack 配置中，向 plugins 属性传入的是插件的实例。

clean-webpack-plugin：清除之前打包产生的文件（开发环境）

• 1、先安装：npm install clean-webpack-plugin -D；
• 2、在配置文件中先导入插件：

let {ClaenWebpackPlugin} = require('clean-webpack-plguin')；

• 3、在plugins属性中使用：

new CleanWebpackPlugin()

html-webpack-plugin：将打包后的js文件自动引入到html文件中（开发环境）

• 1、先安装：npm install html-webpack-plugin；
• 2、在配置文件中导入：

let HtmlWebpackPlugin = require('html-webpack-plugin')；

• 3、在plugins中使用：

new HtmlWebpackPlugin({
 // 相关配置 ...
})

webpack-dev-server：实现更改代码也会自动重新打包（开发环境）

• 1、安装：npm install webpack-dev-server -D
• 2、在webpack.config.js中配置devServer
• 3、在package.json文件中配置命令：“start”: “webpack-dev-server”

webpack.config.js配置

// webpack 的配置文件（遵循commonJS规范）

let path = require('path'); // node内置的模块
console.log(__dirname); // node的每一个模块中自带的变量，指的是当前文件夹的绝对路径
console.log(__filename); // __filename比__dirname多了一个文件的名字

console.log(path.resolve(__dirname, 'build')); // 创建一个新的文件夹，其目录为：当前文件夹/build

// 导入clean-webpack-plugin插件：用来清空之前打包生成的文件
let {CleanWebpackPlugin} = require('clean-webpack-plugin');

// 导入html-webpack-plugin插件：用来自动根据对应的html模板生成新的html文件
let HtmlWebpackPlugin = require('html-webpack-plugin');

// 这个文件要导出一个对象
module.exports = {
  mode: 'development', //指定打包换环境 development/production(默认)，如果在package.json配置命令时制定了，那这里就不需要了
  entry: './src/A.js', // 告诉webpack打包的主入口文件(默认走的是src/index.js)
  // 如果是单入口的话，值就是一个字符串类型（入口文件地址及文件名）；如果是多入口的话，值就是一个对象，属性名自定义，属性值是入口文件地址及名字

  output: {
    // 打包之后的输出文件
    // [hash]是一个参数，默认会把哈希值带上，可以限制hash的长度，例如限制为6位 [hash:6]
    filename: 'bundle.[hash:6].js', // 指定打包后的文件的名字
    // 还需要指定打包后的文件存放到哪里
    path: path.resolve(__dirname, 'dist')// path的值需要是一个绝对路径
  },
  plugins: [
    // 使用clean-webpack-plugin插件
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './index.html', // 选择的模板
      title: '我是新生成的html的title', // 新生成html文件的title
      // 这需要将模板中的title内容换成 
      filename: 'newIndex.html', // 打包后的html文件名（如果不写默认跟模板文件名一样）
      minify: true, // 生成的html要不要打包。默认false不打包
      // chunks: []
    })
  ],
  devServer: {
    port: 9999,  // 打开服务的端口
    open: true,  // 是否自动打开浏览器
    hot: true,  // 启动热更新
    compress: true, // 开启 gzip 压缩
    contentBase: 'static',  // 静态资源目录
  }
 /* 
  * devServer注意事项：
    1、默认打开的是 index.html页面，如果没有，则页面显示的是静态资源目录下的文件
    2、如果想要显示打包后的html文件（例如我这里的newIndex.html），则需要手动在浏览器打开的地址后面补上 /nesIndex.html
    3、这里打包是打包到内存中，因此在dist文件夹中是看不到任何文件的
 */
}

package.json配置

• package.json文件中，只有scritp中的命令是需要我们自己手动配置的，其他的不用管

{
  "name": "webpack01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "mydev": "webpack --config webpack.dev.js",
    "start": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^4.5.0",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}