webpack

webpack

webpack 默认识别js文件， 可以使用 CommonJs （模块化开发）语法 ， 也可以使用 es6 （模块化开发）的语法

webpack的基础配置

安装

npm init -y
npm i webpack webpack-cli --save-dev

配置启动命令

在package.json 文件的scripts 字段中配置启动命令（打包命令）, 配置一个开发环境development，一个生产环境production

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack --mode development",
    "build":"webpack --mode production"
  },

搭建项目的结构

在 项目的根目录下 创建一个src文件夹， 在该文件夹下创建一个 index.js 文件 作为默认的入口文件，

• src
  • index.js

运行命令

命令是二选一 ； 运行命令后，自动生成dist文件夹， 文件夹下会有一个默认的main.js文件，这就是打包编译后生成的产物

npm  run dev // 开发
npm run build  // 生产

webpack的配置文件 webpack.config.js

webpack 默认处理js文件，如果想要处理其他的文件或者实现其他的功能，需要借助于插件或者loader

webpack的入口

1. 单个入口； 可以指定入口文件名

module.exports = {
  entry:'./src/index.js'  
}

2. 多个入口， 合并成一个文件输出

module.exports = {
  entry:['./src/index.js', './src/list.js', ...]
}

3. 多入口配置 对应多个出口， 每个输出的文件必须有唯一的标识名
   对象的 key 就是输出文件的名字

module.exports = {
  entry:{
    index:'./src/index.js',
    app:'./src/app.js'
  }
}

webpack的出口

1. 单一出口 或者 多个入口， 合并成一个文件输出

const path = require('path')
module.exports = {
  //  入口配置方式1
  entry:'./src/index.js' ,
  //  入口配置方式2 
  entry:['./src/index.js', './src/list.js', ...]
 
  // 配置出口
  output:{
    //  path 属性 配置 输出文件的目录  dist 存放文件的文件夹 名（可以自定义，但是通常使用都是dist）
    path:path.resolve(__dirname, 'dist')
    //  filename 属性 配置的 是输出文件名和路径（放到指定的文件夹下）
    // filename:'demo.js'
    filename:'js/demo.js'
  }
}

2. 多出口的配置

const path = require('path')
module.exports = {
  entry:{
    index:'./src/index.js',
    app:'./src/app.js'
  },

  output:{
    path:path.resolve(__dirname, 'dist'),
    //  [name] 自动映射 entry 中的key 就是输出的文件名
    filename:'[name].js'
  }
}

webpack的插件

插件使用的常规步骤

1. 下载安装插件
2. 在 webpack.config.js 文件中引入
3. 在 plugins 字段中进行配置

自动管理 dist 文件夹

使用 clean-webpack-plugin 插件 ;

//  1 下载
npm i  clean-webpack-plugin  --save-dev

在 webpack.config.js 文件中引入 并进行配置

//  高版本引入方式
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
//  低版本直接引入
// const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
  plugins:[
    new CleanWebpackPlugin()
  ]
}

2 使用webpack内置的配置项管理dist文件夹

const path = require('path')
module.exports = {
  entry:{
    index:'./src/index.js',
    app:'./src/app.js'
  },

  output:{
    path:path.resolve(__dirname, 'dist'),
    //  [name] 自动映射 entry 中的key 就是输出的文件名
    filename:'[name].js',
    //  通过 webpack的内置配置项 output.clean 管理dist文件夹
    clean:true
  }
}

自动生成html 文件

使用html-webpack-plugin插件

npm i html-webpack-plugin --save-dev

在webpack.config.js中引入配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry:{
    index:'./src/index.js',
    app:'./src/app.js'
  },

  output:{
    path:path.resolve(__dirname, 'dist'),
    //  [name] 自动映射 entry 中的key 就是输出的文件名
    filename:'[name].js'
  },

  plugins:[
    //  生成默认项
    // new HtmlWebpackPlugin()   
    //  进行先关的配置  单页面配置
   /*  new HtmlWebpackPlugin({
      //  template 模板文件 根据该模板生成html文件
      template:'url',
      //  filename: 生成的文件名 可以自定义
      filename:'demo.html'
    })   */

    //  多页面配置
    new HtmlWebpackPlugin({
      //  template 模板文件 根据该模板生成html文件
      template:'./src/index.html',
      //  filename: 生成的文件名 可以自定义
      filename:'index.html',
      //  指定引入的js文件 ， 数组中的值 和 enrty 的key 进行映射
      chunk:['index']
    }),
    new HtmlWebpackPlugin({
      //  template 模板文件 根据该模板生成html文件
      template:'./src/news.html',
      //  filename: 生成的文件名 可以自定义
      filename:'news.html',
      chunk:['app']
    })  


  ]
}

webpack的loader

webpack的loader 需要下载， 然后直接在 webpack.config.js中进行配置, 在module字段中进行配置

webpack 处理css文件

需要使用style-loader 和 css-loader

const path = require('path')
module.exports = {
  entry:'./src/index.js',
  output:{
    path:path.resolve(__dirname, 'dist'),
    filename:'index.js'
  },
  module:{
    rules:[
      // 每个对象就是一个loader的配置
      {
        test:/\.css$/,
        use:['style-loader', 'css-loader']
      }
    ]
  },
  plugins:[
    
  ]
}