webpack打包

小鹿崽丫

已于 2024-07-19 09:49:08 修改

阅读量261

点赞数 2

文章标签： webpack 前端 node.js

于 2024-07-11 15:37:21 首次发布

本文链接：https://blog.csdn.net/weixin_52104111/article/details/140352453

版权

Vite和webpack的区别

Webpack虽然慢但是还是强大一些使用commonJs语法/require引入文件

vite主要注重在浏览器上的体验,使用es modules语法/import引入文件

1.初始化项目 npm init -y；生成package.json

2.安装依赖 npm i webpack webpackcli -D

3.创建src目录编写代码(index.js)

4.打包 npm webpack 生成dist；或者在package.json里面配置”scricpt” 就可以使用 npm run build

配置webpack.config.js

webpack入门

// webpack.config.js
const path = require("path")

module.exports = {
    mode:"development",
    entry:path.join(__dirname,"src","index.js"),
    output:{
        path:path.join(__dirname,"dist"),
        filename:"bundle.js"
    }
}

 // package.json
"scripts": {
    "build": "webpack",
  },

<-- dist/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        webpack 入门
    </div>

<script defer src="./bundle.js"></script>
</body>
</html>

npm run build

插件

html-webpack-plugin

以上就是最简单的webpack入门；可以看出如果这样手动在dist创建html和引入js文件是很麻烦的，下面学习怎么自动生成一个或多个html文件，并将打包生成的js文件自动引入到html文件中

npm install html-webpack-plugin --save--dev

const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {
    plugins:[
        new HtmlWebPackPlugin({
            template:path.join(__dirname,"src","index.html"),
            filename:'index.html'
        })
    ],
   
}

开发服务器

webpack-dev-server

然后我们还要注意一个如果在js文件上改了内容如果不npm run build 是看不到最新内容的，但是每次都要重新打包是很麻烦的，有什么插件可以实时执行最新的js打包文件

npm i webpack-dev-server

module.exports = {
// 定义端口
    devServer:{
        port:8000,
        static:path.join(__dirname,"dist")
    }
}

npm run dev

Loader

webpack默认只会去处理js文件，如果在入口文件中引入了其他后缀的文件，那么就要使用loader来处理

module:{
rules:[
    {
        test:/\.css$/i,
        use:['style-loader','css-loader'] // 这两个loader顺序固定
    },
    {
        test:/\.jpg$/i,
        type:"asstet/resource" // 图片资源类型的数据，可以通过指定的type来处理
    }
]
}

Loader和plugin的区别是：loader会对代码编译，而plugin不会，它只是帮助webpack拓展功能

Babel

babel-loader

把新的js语言打包成旧的js语音

npm i babel-loader @babel/core @babel/preset-env babel-loader --save--dev

在根目录建立.babelrc文件

{
    // 预设 ：babel一系列插件的集合
    "presets":["@babel/preset-env"]
}

module.exports = {
    module:{
       rules:[
        {
            test:/\.js$/,
            loader: "babel-loader",
            include:path.join(__dirname,"src"),
            exclude:/node_modules/
        }
       ] 
    },

}

  module: {
        rules: [
            //loader的配置
            {
                /**test 代表要检测的文件 */
                test: /\.css$/, //只检测.css文件
                use: ['style-loader', 'css-loader'],//对检测到文件使用哪些loader
            },
            {
                test: /\.less$/,//只检测.less文件
                //loader:'xxx',loader只能使用一个loader，use可以使用多个loader
                use: ['style-loader', 'css-loader', 'less-loader'],//对检测到文件使用哪些loader
            }
        ]
    },

}

alias

module.exports = {
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 将src目录设置为@别名
      '@components': path.resolve(__dirname, 'src/components') // 将src/components目录设置为components别名
    }
  }
};
// 貌似vite的是用斜杠不是@：'/components' 待确定。