webpack初体验

核心概念

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。webpack中文文档

安装和配置

一.安装

npm init -y 

生成一个package.json的文件

 npm install webpack -g
 npm install webpack -cli

在package.json文件里面写启动配置

"build"："webpack --mode development -w"

web有两种打包模式

1. devlopment 不压缩打包
2. production 压缩打包
   默认的入口文件是src/index.js
   默认出口文件是dist/main.js

配置

创建一个webpack.config.js配置文件

const HtmlWebpackPlugin = require('html-webpack-plugin')  //引入自己生成html文件插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin')  //引入清理打包后的多余文件
const path=require("path")
module.exports={
  entry:"./src/index.js"  //默认的入口文件
  mode:"development" //上面package文件里面写"build"："webpack --mode development -w"太长很麻烦也很low，所有如果配置文件里面写了mode，上面我们就可以省略掉mode development  改为"build":"webpack -w"这样会不会更简洁呢？
  output:{
	path: path.resolve(__dirname, 'dist'),
    filename:bundle[hash:8].js  //默认的出口文件  加上hash:8可以解决缓存问题
 },{
  port:8080,  //设置端口号
  inline:false  //是否热更新  true是  false否
 },
 module:{
 	rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },  //css打包
      {
        test: /\.(png|jpg|gif)$/i,  //图片打包的格式  可以修改
        use: [{
          loader: 'url-loader', options: {
            limit: 8192,  //图片最大8192 如果大于8192会单独形成一个文件
          },
        },],
      },
    ]
 },
 plugins: [  //自动根据html模板生成一个html文件  自动引入打包后的js文件
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    new CleanWebpackPlugin()  //自动清除打包后的多余文件
  ]
}

插件

 npm install html-webpack-plugin //自动根据html模板生成一个html文件  自动引入打包后的js文件  
 npm install clean-webpack-plugin  //清理dist打包后的多余文件 
 npm install style-loader css-loader //是为了打包css文件
 npm install file-loader  url-loader  //打包图片
 npm install webpack-dev-server  //热更新插件  需要在package.json 设置  "start":"webpack-dev-server -w --progress --open"

插件具体使用可以看webpack.config.js配置文件

这就是今天的webpack的初体验！