webpack打包文件的基本使用

時間 2021-08-14

標籤 javascript css html java node webpack es6 web npm json 欄目 JavaScript 简体版

原文原文鏈接

1、webpack簡單入門

一、webpack安裝javascript

# 安裝webpack
npm init -y
npm install webpack webpack-cli --save-dev

# 查看版本
./node_modules/.bin/webpack -v
4.42.1

二、準備要打包的文件
src/hellowebpack.jscss

export function hellowebpack() {
    return 'hellowebpack'
}

src/index.jshtml

import { hellowebpack } from './hellowebpack'

document.write(hellowebpack())

三、配置webpack.config.jsjava

'use strict'

const path = require('path');

module.exports = {
    // 打包入口
    entry: {
        index: './src/index.js',
    },

    // 指定輸出地址及打包出來的文件名
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'index.js'
    },

    // 開發環境
    mode: 'production',
}

四、執行打包node

./node_modules/.bin/webpack
# dist 文件夾下多出一個index.js文件

五、引用打包文件webpack

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script src="./index.js" type="text/javascript"></script>
</body>

</html>

六、配置打包命令
package.jsones6

"scripts": {
    "build": "webpack"
  }

打包命令web

npm run build

此時的項目結構爲：npm

.
├── dist
│   ├── index.html
│   └── index.js
├── node_modules
├── package.json
├── src
│   ├── hellowebpack.js
│   └── index.js
└── webpack.config.js

2、loader

配置完以後都須要從新打包生效json

一、babel解析es6

cnpm i @babel/core @babel/preset-env babel-loader -D

根目錄新建.babelrc 並配置

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

配置 webpack.config.js, 添加module屬性

'use strict'
const path = require('path');

module.exports = {
    // 打包入口
    entry: {
        index: './src/index.js',
    },

    // 指定輸出地址及打包出來的文件名
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'index.js'
    },

    module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            }
    },

    // 開發環境
    mode: 'production',
}

babel編譯效果

// 編譯前
document.write(() => hellowebpack())

// 編譯後
document.write((function(){return"hellowebpack"}))

二、加載css文件
css-loader用於加載css文件並生成commonjs對象

style-loader用於將樣式經過style標籤插入到head中

npm i style-loader css-loader -D

配置 webpack.config.js

{
    test: /.css$/,
    // 執行的時候是先加載css-loader，將css解析好後再將css傳遞給style-loader
    use: [
        'style-loader',
        'css-loader',
    ]
}

index.js中引入css文件
public.css

.color-text {
    font-size: 20px;
    color: red
}

index.js

import { hellowebpack } from './hellowebpack'
import "./public.css"

document.write(hellowebpack())

三、加載less

npm i less less-loader -D

配置 webpack.config.js

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

四、加載圖片

# url-loader直接內置了file-loader
npm i url-loader -D

配置 webpack.config.js

{
    test: /.(jpg|png|gif|jpeg)$/,
    use: [{
        loader:'url-loader',
        options: {
            // 單位是字節, 若是圖片大小小於這個值，就會被打包爲base64格式
            limit:160000,
            name: 'imgs/[name].[hash].[ext]'
        }
    }]
}

3、完整配置

目錄結構

$ tree -L 2
.
├── dist
│   ├── imgs
│   ├── index.html
│   └── index.js
├── node_modules
├── src
│   ├── demo.png
│   ├── hellowebpack.js
│   ├── index.js
│   └── public.less
├── .babelrc
├── package.json
└── webpack.config.js

三個根目錄下的配置文件
.babelrc

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

package.json

{
  "name": "web-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.4.2",
    "file-loader": "^6.0.0",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "style-loader": "^1.1.3",
    "url-loader": "^4.0.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  }
}

webpack.config.js

'use strict'
const path = require('path');

module.exports = {
    // 打包入口
    entry: {
        index: './src/index.js',
    },

    // 指定輸出地址及打包出來的文件名
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'index.js'
    },

    module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            },
            {
                test: /.css$/,
                // 執行的時候是先加載css-loader，將css解析好後再將css傳遞給style-loader
                use: [
                    'style-loader',
                    'css-loader',
                ]
            },
            {
                test: /.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /.(jpg|png|gif|jpeg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        // 若是圖片大小小於這個值，就會被打包爲base64格式
                        limit: 160000,
                        name: 'imgs/[name].[hash].[ext]'
                    }
                }]
            }
        ]
    },

    // 開發環境
    mode: 'production',
}

參考
一小時的時間，上手 Webpack

相關標籤/搜索

基本使用