webpack打包学习

webpack安装

`npm install webpack webpack-cli`

webpack配置

1. 创建webpack.config.js配置文件

        const path = require('path')
        module.exports = {
            mode: 'development', // 打包模式,生产模式压缩,开发模式不压缩代码
            entry: './main.js', // 入口文件
            output: {  // 出口文件
                path: path.join(__dirname,'dist'),
                filename: 'bundle.js'
            },
        }

2.打包css配置加载器style-loader,css-loader

    module.exports = {
        mode: 'development',
        entry: './main.js',
        output: {
            path: path.join(__dirname,'dist'),
            filename: 'bundle.js'
        },
        module: {
            rules: [
                {test: /\.css$/,use: ['style-loader','css-loader']}
            ]
        },
       
    }

webpack入口文件

// main.js
import './src/1.js'
import './src/1.css'

// 1.css
    .box {
        width: 100px;
        height: 100px;
        background-color: aqua;
    }

// 1.js
  function writeHello() {
            document.write('<div class="box">123</div>')
            document.body.style.color = 'gold'
        }
        var addBtn = document.querySelector('.addBtn')
        addBtn.addEventListener('click',writeHello)

执行打包命令

方法一、执行命令npx webpack
方法二、执行npm命令,配置package.json文件

    "scripts": {
                "dev": "webpack"
            },

执行命令 npm run dev打包

package.json的配置

1. 手动打包

 "scripts": {
             "dev": "webpack"
         },

2. 观察文件变化自动打包

 "scripts": {
            "dev": "webpack --watch"
        },

3. hot热模块替换

 "scripts": {
            "dev": "webpack  --hot"
        },

配置wepback热更新

• 热更新可以在编辑并保存入口文件后自动执行打包命令，并且实现无刷新更新页面
  *
  1. 安装webpack-dev-server
  2. 配置package.json文件

   "scripts": {
                "dev": "webpack-dev-server"
              },

3. 执行命令npm run dev
4. 实现打包后自动打开浏览器页面

// package.json
    "scripts": {
                "dev": "webpack-dev-server --open"
              },

或者

// webpack.config.js
      module.exports = {
                  mode: 'development',
                  entry: './main.js',
                  output: {
                      path: path.join(__dirname,'dist'),
                      filename: 'bundle.js'
                  },
                  devServer: {
                        open: true
                  },
                  module: {
                      rules: [
                          {test: /\.css$/,use: ['style-loader','css-loader']}
                      ]
                  },
                 
              }