webpack 打包实例项目

缺乏、安全感 2023-07-22 03:45 17阅读 0赞

最近用webpack打包部署了一个web服务器项目，将过程记录一下，方便日后查阅。

### 1.安装webpack ###

npm install webpack webpack-cli --save-dev

### 2.配置babel-loader ###

用以解析ES6, ES7等js新特性语法，它的配置文件是.babelrc

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

### 3.配置react ###

用以解析React JSX， Vue等语法。

npm install react react-dom @babel/preset-react  --save-dev

### 4.配置css-loader ###

用以加载.css文件，并且转换成commonjs对象。

npm install style-loader  --save-dev

### 5.配置style-loader ###

用以将样式通过<style>标签插入到head中。

npm install css-loader  --save-dev

###  6.配置less-loader ###

用以将less转换成css。

npm install less  less-loader  --save-dev

###  7.配置file-loader ###

用以处理文件。

npm install file-loader  --save-dev

### 8.配置文件webpack.config.js ###

'use strict'
    const path = require('path')
    module.exports = {
        entry:'./app.js',
        output:{
            path: path.join(__dirname,'dist'),
            filename:'app.js'
        },
        mode:'production',
        module:{
            rules:[
                { test: /.js$/, use:'babel-loader'},
                { test: /.css$/, use:['style-loader','css-loader']},
                { test: /.less$/, use:['style-loader','css-loader','less-loader']},
                { test: /.(png|jpg|gif|jpeg)$/, use:'file-loader'},
                { test: /.(woff|woff2|eot|ttf|otf)$/, use:'file-loader'}
            ]
        }
    }

entry表示入口，output的path和filename分别表示：打包生成的文件路径和文件名称。

### 9.配置文件.babelrc ###

{
        "presets": [
            "@babel/preset-env",
            "@babel/preset-react"
        ]
    }

###  10.打包 ###

webpack

打包成功后，即可在当前目录的dist文件夹下，看到打包生成的文件。