webpack的基本使用

1、创建空白目录，并且在项目根目录运行npm init -y，初始化包管理配置文件package.json

2、新建src源代码目录，创建index.html和index.js文件

3、在项目中安装配置webpack，在项目根目录运行以下命令安装webpack相关的包

npm install webpack webpack-cli -D

4、在项目根目录创建webpack.config.js配置文件，并且初始化如下配置

module.exports = {
	mode:'development' //development  or  production
	}

5、webpack的自动打包设置，在项目根目录下运行以下命令

npm install webpack-dev-server -D

在package.json文件的scripts选项中追加dev选项
其中webpack-dev-server是自动打包插件，--open表示运行自动打包的时候以默认浏览器打开项目文件，--host和--port则表示在哪个地址哪个端口运行项目

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
    },

在index.html的script标签中引入bundle.js

<script src="/bundle.js"></script>

5.1、安装html-webpack-plugin插件方便访问项目文件

npm install html-webpack-plugin -D

在webpack.config.js文件中增加如下配置，并且向外暴露配置插件

const HtmlWebpackPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html'
})

module.exports = {
    mode: "development"，
    plugins: [
        htmlPlugin
    ]
}

5.2、安装style-loader和css-loader加载器以处理css文件

npm install style-loader css-loader -D

安装完之后需要在webpack.config.js文件的module.exports中追加如下配置

module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }]
    }

5.3、安装less-loader加载器处理less文件

npm install less-loader less -D

安装完之后需要在webpack.config.js文件的module.exports中追加对应的规则，如下

 module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
        ]
    }

5.4、css兼容性加载器

npm install postcss-loader autoprefixer -D

安装完之后需要在项目根目录下创建postcss.config.js配置文件，并且初始化如下代码

const autoprefixer = require('autoprefixer');
module.exports = {
    plugins: [autoprefixer]
}

**在webpack.config.js的module配置项中修改如下内容，在css的规则里面增加postcss-loader加载器 **

 module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
        ]
    }

5.5 js高级语法加载器

在根目录输入以下命令

npm i babel-loader @babel/core @babel/runtime -D

npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

在根目录创建babel.config.js配置文件并且初始化内容

module.exports = {
    presets: ['@babel/preset-env'],
    plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
}

在webpack.config.js文件的module.rules中添加以下规则

 {test:/\.js$/,use:['babel-loader'],exclude:/node-modules/}

5.5、图片加载器

npm install url-loader file-loader -D

在webpack.config.js文件中追加如下配置

module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            {
                test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 10240,
                        esModule: false
                    }
                }],
                type: 'javascript/auto',
            }
        ]
    }

6、重新运行npm run dev命令，显示successful即可

具体配置如下webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html'
})
module.exports = {
    mode: "development",
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: "bundle.js"
    },
    devServer: {
        static: {
            directory: path.join(__dirname, '/'),
            watch: true
        }
    },
    plugins: [
        htmlPlugin
    ]
}

package.json文件配置如下

{
    "name": "web",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^5.73.0",
        "webpack-cli": "^4.9.2",
        "webpack-dev-server": "^4.9.2"
    },
    "dependencies": {
        "jquery": "^3.6.0"
    }
}

7、vue图形化界面创建项目

桌面打开命令行端口输入以下命令，等待弹出界面

vue ui