webpack打包

最新推荐文章于 2024-04-27 08:39:59 发布

海涛高软

最新推荐文章于 2024-04-27 08:39:59 发布

阅读量197

点赞数

分类专栏： CesiumJS

本文链接：https://blog.csdn.net/qq_15267341/article/details/111897991

版权

CesiumJS 专栏收录该内容

74 篇文章 2 订阅

订阅专栏

打包工具

npm i webpack webpack-cli -g -D

解析css中使用的图片

npm i url-loader file-loader -D

解析css样式资源

npm i style-loader css-loader -D

将指定的页面拷贝到打包目录，并且将打包后的js以标签方式插入到页面中

npm i html-webpack-plugin -D

处理html中的图片

npm i html-loader -D

自动编译

npm i webpack-dev-server -D

CSS提取，这个取代之前的style-loader

npm i mini-css-extract-plugin -D

css兼容性处理

npm i postcss-loader autoprefixer -D

css压缩

npm i -D optimize-css-assets-webpack-plugin

js兼容性处理,可以将es6及高级语法转成普通语法

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

package.json

{
    "name": "lianxi03",
    "version": "1.0.0",
    "description": "",
    "main": "./src/index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "webpack serve --open Chrome.exe"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "jquery": "^3.5.1"
    },
    "devDependencies": {
        "html-webpack-plugin": "^4.5.0",
        "webpack": "^5.11.0",
        "webpack-cli": "^4.3.0",
        "webpack-dev-server": "^3.11.0"
    }
}

webpack.config.js

const path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {

    mode: "development",
    // 配置打包的入口和出口文件
    entry: './src/index.js',
    output: {
        // 输出文件的存放路径
        path: path.resolve(__dirname, 'dist'),
        // 输出文件的名称
        filename: 'bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'rd平台',
            template: "src/index.html"
        })
    ]

}

index.js

import $ from "jquery"

$(function() {
    $("li:odd").css("backgroundColor", "pink");
    $("li:odd").css("fontWeight", "bold");
})

index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../dist/bundle.js"></script>
</head>

<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
    </ul>
</body>

</html>

使用 npm run start 执行自动编译，注意这个时候，不用在模板页中，引入打包的js，会在内存中自动加入

但是如果开完完毕时，使用webpack命令打包时，记得要将webpack.config.js中的如下代码去掉，此时，需要手动的将打包后的js，通过script标签引入到html页中

 plugins: [
        new HtmlWebpackPlugin({
            title: 'rd平台',
            template: "src/index.html"
        })
    ]

FR：徐海涛（hunk Xu)
QQ技术交流群：386476712

海涛高软

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
webpack打包

webpack.config.jsconst path = require('path')let HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { mode: "development", // 配置打包的入口和出口文件 entry: './src/index.js', output: { // 输出文件的存放路径 path: path.re.
复制链接

扫一扫