webpack 世界大门(*^_^*)

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。个人看法就是帮我们整理优化项目、个性化定制项目结构，打造出属于自己的项目结构的工具，简单来说 想怎么玩，看自己兴趣吧。

前期准备：先安装依赖包

npm install webpack --save-dev

npm install webpack-cli --save-dev

 

项目搭建

目录

1、新建 demo1 文件夹、执行cmd命令  npm init 创建package.json

 

2、根目录下 新建src文件夹 ，并在src文件夹下建立index.js ，里面内容先简单写个console.log语句就行。现在不放在命令行敲入webpack 会发现 项目中多出dist 文件夹。其实这是默认webpack配置。 默认是 production 模式，

webpack 有默认的配置，如默认的入口文件是 ./src，默认打包到dist/main.js。更多的默认配置可以查看: node_modules/webpack/lib/WebpackOptionsDefaulter.js。

下面我们修改这个默认配置

3、 在根目录新建webpack.config.js

注意：接下来我要使用到一些依赖，我们先提前安装下

npm install babel-loader --save-dev //将JS代码向低版本转换

npm install @babel/core @babel/preset-env @babel/plugin-transform-runtime --save-dev

npm install @babel/runtime @babel/runtime-corejs3 --save-dev

 

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

npm i webpack-dev-server --save-dev

npm install style-loader css-loader postcss-loader autoprefixer --save-dev

npm install url-loader --save-dev

1、首先配置入口文件(entry)

module.exports = {
    mode: "development",
    entry: {
        index: './src/index.js'
    },
}

2、配置输出配置

output: {
     path: path.resolve(__dirname, 'build'), //必须是绝对路径
     filename: '[name].[hash:8].js'
}

3、解析public/index.html文件

const HtmlWebpackPlugin = require('html-webpack-plugin');


plugins: [
   new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html', //打包后的文件名
      chunks: ['index'] // 只引入index.js
   })
]

4、loader 基本使用 （解析jsx、css、img）等文件

  module: {
        rules: [{
                test: /\.(jsx|js)?$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env"],
                        plugins: [
                            [
                                "@babel/plugin-transform-runtime",
                                {
                                    "corejs": 3
                                }
                            ]
                        ]
                    }
                },
                exclude: /node_modules/ //排除 node_modules 目录，
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {}
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 10240, //低于10k的资源将会被转化成base64
                        esModule: true, // 设置为 false，否则，<img src={require('XXX.jpg')} /> 会出现 <img src=[Module Object] />
                        outputPath: 'images/'
                    }
                }]
            }
        ]

5、在这里 我把package.json 修改了一下

"start": "webpack serve --config webpack.config.js --open",
"build": "npx webpack"

6、简易项目 可以下载项目看下

https://github.com/a852882874/webpack.git