webpack运用

最新推荐文章于 2024-10-04 21:38:17 发布

快乐的小鱼儿12

最新推荐文章于 2024-10-04 21:38:17 发布

阅读量190

点赞数

文章标签： webpack 前端 npm

本文链接：https://blog.csdn.net/m0_67296095/article/details/124545976

版权

任意新建一个空文件夹，取名为webpack-demo，进入到文件夹内部，用 npm init -y 命令来生成一个package.json
创建三个文件:index.html , index.js , tool.js
项目名
├── index.html
├── index.js
├── tool.js
└── package.json
进入文件夹根目录,开启小黑窗,执行下包命令: npm i webpack webpack-cli -D

导出模块

export const updateDom = (id, content) => {
  window.document.getElementById(id).innerHTML = content
}

导入模块
```
import { updateDom } from './tool.js'
```

7.使用webpack来做打包执行命令 : npx webpack ./index.js 完成后会生成一个main.js

8.再在index.html引入这个main.js文件就可以了

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
  mode: 'production',//打包方式
  entry: './src/js/main.js',//入口
  output: { //出口
    "path": path.join(__dirname, "build"),
    "filename": "bundle.js"
  },
  module: {
    rules: [ //规则
      {
        test: /\.css$/, 		// 正则测试
        use: ['style-loader', 'css-loader'] 	// loader
      },
      {
        test: /\.less$/, 		// 正则测试
        use: ['style-loader', 'css-loader', 'less-loader'] 	// loader
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
        type: 'asset' // 在导出一个 data URI 和一个单独的文件之间自动选择
      }

    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({ // 打包输出HTML
      minify: { // 压缩HTML文件
        removeComments: true, // 移除HTML中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true// 压缩内联css
      },
      filename: 'index.html',
      template: path.resolve('./index.html') // 指定模块的位置
    })
  ],
  devServer: {
    host: '127.0.0.1',  // 配置启动ip地址
    port: 10088,  // 配置端口
    open: true  // 配置是否自动打开浏览器
  }
}

//2.再引入
import { updateDom } from './tool.js'
// import '../css/style.css'
import '../less/index.less'
import imgUrl from '../img/webpack.png'
const theImg = document.createElement("img")
theImg.src = imgUrl
document.body.appendChild(theImg)
updateDom('app', 'index.html')