webpack 配置流程

1.先初始化

npm init -y

生成package.json 文件

2.安装webpack

npm install --dev webpack webpack-cli

package.json 文件会增加 dependencies属性

生成 package-lock.json、node_modules 文件

3.根目录下创建src 文件夹，src下创建index.js 作为入口文件

4.根目录下创建webpack.config.js 作为 webpack的配置文件

5.安装style-loader css-loader

npm install --dev style-loader css-loader

6.安装html-webpack-plugin

自动生成index.html 文件

7.安装babel 转移es6 语法

npm install --dev babel-loader @babel/core @babel/preset-env

8.安装压缩js的插件

npm install --dev terser-webpack-plugin

9.安装自动编译

npm install --dev webpack-dev-server

package.json 中script 属性配置 "start":"webpack serve --open"

10.配置打包的js 加hash 值 webpack.config.js 中

output:{
       filename:"[name].[contenthash].js",
       path:path.resolve(__dirname,"dist")
   },

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const TerserPligin = require("terser-webpack-plugin")
module.exports = {
   mode:"development",
   devtool:"inline-source-map",//方便查看打包后的源代码
   entry:"./src/index.js",
   output:{
       filename:"[name].[contenthash].js",
       path:path.resolve(__dirname,"dist")
   },
   module:{//exclude 除了node_modules 里面的js 其他的都转义
       rules:[
           {
               test:/\.css$/i,
               use:['style-loader','css-loader']
           },
           {
               test:/\.(png|jpg|jpeg|gif|svg)$/i,
               type:"asset/resource"
           },
           {
               test:/\.js$/,
               exclude:/node_modules/,
               use:{
                   loader:"babel-loader",
                   options:{
                       presets:["@babel/preset-env"]
                   }
               }
           }
       ]
   },
   plugins:[//title 网站标题
       new HtmlWebpackPlugin({
           title:"哈哈"
       })
   ],
   optimization:{
       minimize:true,
       minimizer:[new TerserPligin()]
   },
   devServer:{
       static:"./dist"
   }
}

webpack 配置 流程

猜你喜欢