{"id":1043,"date":"2023-03-12T09:57:30","date_gmt":"2023-03-12T01:57:30","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=1043"},"modified":"2023-04-29T12:41:31","modified_gmt":"2023-04-29T04:41:31","slug":"webpack-core-concepts-and-introduction","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/03\/12\/webpack-core-concepts-and-introduction\/","title":{"rendered":"Webpack\u6838\u5fc3\u6982\u5ff5\u53ca\u5165\u95e8"},"content":{"rendered":"

\u6838\u5fc3\u6982\u5ff5<\/h2>\n
Entry\n|   \u4ee3\u7801\u7684\u5165\u53e3,\u6253\u5305\u7684\u5165\u53e3,\u5355\u4e2a\u6216\u591a\u4e2a\u5165\u53e3\nOutput\n|   \u6253\u5305\u6210\u7684\u6587\u4ef6(bundle) \u4e00\u4e2a\u6216\u591a\u4e2a \u81ea\u5b9a\u4e49\u89c4\u5219\nLoaders\n|   \u5904\u7406\u6587\u4ef6,\u8f6c\u5316\u4e3a\u6a21\u5757\nPlugins\n|   \u53ef\u4ee5\u53c2\u4e0e\u6574\u4e2a\u6253\u5305\u7684\u8fc7\u7a0b\n|   \u6253\u5305\u4f18\u5316\u548c\u538b\u7f29\n|   \u914d\u7f6e\u7f16\u8bd1\u65f6\u7684\u53d8\u91cf\nMode<\/code><\/pre>\n
<\/p>\n
Entry,Output<\/h3>\n
\u5b9a\u4e49\u591a\u4e2a\u5165\u53e3\u6587\u4ef6\uff0c\u8f93\u5165\u591a\u4e2a\u6587\u4ef6<\/p>\n
webpack.config.js<\/p>\n
const webpack = require('webpack');\nconst {\n    resolve\n} = require('path');\n\nconst config = {\n    entry: {\n        index:resolve(__dirname, 'src\/index.js'),\n        vendor:resolve(__dirname, 'src\/vendor.js')\n    },\n    output: {\n        path: resolve(__dirname, 'dist'),\n        filename: "[hash]-[name]-bundle.js"\n    },\n    mode: 'development'\n}\nmodule.exports = config<\/code><\/pre>\n
package.json<\/p>\n
"scripts": {\n    "build":"webpack --config webpack.config.js"\n}<\/code><\/pre>\n
Loader,Plugins<\/h3>\n
loader \u8ba9 webpack \u80fd\u591f\u53bb\u5904\u7406\u90a3\u4e9b\u975e JavaScript \u6587\u4ef6\uff08webpack \u81ea\u8eab\u53ea\u7406\u89e3 JavaScript\uff09\u3002loader \u53ef\u4ee5\u5c06\u6240\u6709\u7c7b\u578b\u7684\u6587\u4ef6\u8f6c\u6362\u4e3a webpack \u80fd\u591f\u5904\u7406\u7684\u6709\u6548\u6a21\u5757<\/a>\uff0c\u7136\u540e\u4f60\u5c31\u53ef\u4ee5\u5229\u7528 webpack \u7684\u6253\u5305\u80fd\u529b\uff0c\u5bf9\u5b83\u4eec\u8fdb\u884c\u5904\u7406\u3002<\/p>\n
\u4f8b\uff1a\u52a0\u8f7dcss<\/p>\n
npm i style-loader css-loader -S<\/code><\/pre>\n
const webpack = require('webpack');\nconst {resolve} = require('path');\nconst {CleanWebpackPlugin} = require('clean-webpack-plugin');\nconst config = {\n    entry: {\n        index:resolve(__dirname,'src\/index.js'),\n        vendor:resolve(__dirname,'src\/vendor.js')\n    },\n    output: {\n        path: resolve(__dirname, 'dist'),\n        filename: "[hash]-[name]-bundle.js"\n    },\n    plugins: [\n        new CleanWebpackPlugin()\n    ],\n+   module: {\n+       rules: [\n+           {\n+               test: \/\\.css$\/,\n+               use: [\n+                   'style-loader',\n+                   'css-loader'\n+               ]\n+           }\n+       ]\n+   },\n    mode: 'development'\n}\nmodule.exports = config<\/code><\/pre>\n
\/\/\u5e38\u7528\u7684loader\n- \u7f16\u8bd1\u76f8\u5173\nbabel-loader ts-loader\n- \u6837\u5f0f\u76f8\u5173\nstyle-loader css-loader less-loader postcss-loader sass-loader\n- \u6587\u4ef6\u76f8\u5173\nfile-loader url-loader<\/code><\/pre>\n
\u4ee3\u7801\u538b\u7f29<\/h3>\n
module.exports = {\n  \/\/...\n  optimization: {\n    minimize: true\n  }\n};<\/code><\/pre>\n
\u5165\u95e8\u793a\u4f8b<\/h2>\n
\u521d\u59cb\u5316webpack<\/h3>\n
npm init -y\nnpm i webpack webpack-cli -S<\/code><\/pre>\n
\uff081\uff09\u65b0\u5efawebpack.config.js<\/code><\/p>\n
const path = require('path');\nconst config = {\n    entry:path.join(__dirname,'src\/index.js'),\n    output:{\n        \/* \u6253\u5305\u7684\u6587\u4ef6\u540d *\/\n        filename:"bundle.js",\n        \/* \u6253\u5305\u6587\u4ef6\u7684\u8f93\u51fa\u76ee\u5f55 *\/\n        path:path.join(__dirname,'dist')\n    },\n    mode:"development"\n}\nmodule.exports = config;<\/code><\/pre>\n
\uff082\uff09\u4fee\u6539package.json<\/code>\u6587\u4ef6<\/p>\n
{\n  "name": "webpack-test",\n  "version": "1.0.0",\n  "description": "",\n  "main": "index.js",\n  "scripts": {\n    "build": "webpack --config webpack.config.js"\n  },\n  "dependencies": {\n    "webpack": "^4.41.0",\n    "webpack-cli": "^3.3.9",\n  }\n}<\/code><\/pre>\n
\uff083\uff09\u521d\u6b21\u6253\u5305<\/p>\n
npm run build<\/code><\/pre>\n
\u914d\u7f6eplugins<\/h3>\n
npm i html-webpack-plugin -S\nnpm i clean-webpack-plugin -S<\/code><\/pre>\n
html-webpack-plugin<\/p>\n
\/\/\u5728dist\u76ee\u5f55\u4e0b\u81ea\u52a8\u751f\u6210html,\u8ba9\u6253\u5305\u7684js\u6587\u4ef6\u81ea\u52a8\u63d2\u5165\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nplugins: [\n    ... \n    new HtmlWebpackPlugin({\n        title: "webpack\u6d4b\u8bd5"\n    })\n]<\/code><\/pre>\n
clean-webpack-plugin<\/p>\n
\/\/\u6bcf\u6b21\u6253\u5305\u4e4b\u524d\u4f1a\u5c06dist\u76ee\u5f55\u4e0b\u7684\u6587\u4ef6\u6e05\u9664\nconst { CleanWebpackPlugin } = require('clean-webpack-plugin');\nplugins: [\n    new CleanWebpackPlugin()\n]<\/code><\/pre>\n
webpack-server<\/h3>\n
\/\/\u5199\u4ee3\u7801\u7684\u65f6\u5019\u5c31\u53ef\u4ee5\u770b\u5230\u6548\u679c\nnpm i webpack-dev-server -S\nnpm i cross-env -S<\/code><\/pre>\n
\uff081\uff09\u914d\u7f6epackage.json<\/p>\n
"scripts": {\n    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",\n    "serve":"cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"\n}<\/code><\/pre>\n
\uff082\uff09\u914d\u7f6ewebpack.config.js<\/p>\n
const isDev = process.env.NODE_ENV == 'development'\nif (isDev) {\n    config.devServer = {\n        host: 'localhost',\n        port: 8080,\n        \/* \u9519\u8bef\u662f\u5426\u663e\u793a\u5728\u754c\u9762\u4e0a *\/\n        overlay: {\n            errors: true\n        },\n        \/* \u662f\u5426\u8fdb\u884c\u70ed\u66f4\u65b0 *\/\n        hot: true\n    }\n}<\/code><\/pre>\n
\uff083\uff09\u8fd0\u884c<\/p>\n
npm run serve<\/code><\/pre>\n
loader<\/h3>\n
\/\/\u5904\u7406.vue .css .png|jpg\nnpm i css-loader style-loader -S\nnpm i vue-loader vue vue-template-compiler -S\nnpm i file-loader -S<\/code><\/pre>\n
\uff081\uff09\u914d\u7f6ewebpack.config.js<\/p>\n
const {VueLoaderPlugin} = require('vue-loader');\nconst config = {\n    plugins:[\n        new VueLoaderPlugin()\n    ],\n    module:{\n        rules:[\n            {\n                test:\/\\.css$\/,\n                use:[\n                    'style-loader',\n                    'css-loader'\n                ]\n            },\n            {\n                test:\/\\.vue$\/,\n                use:'vue-loader'\n            },\n            {\n                test:\/\\.png|jpg|gif$\/i,\n                use:'file-loader'\n            }\n        ]\n    },\n    mode:"development"\n}<\/code><\/pre>\n
\uff082\uff09\u914d\u7f6esrc\/index.js<\/p>\n
import Vue from 'vue'\nimport '..\/assets\/index.css';\nimport App from '.\/App.vue';\nconst root = document.createElement("div");\ndocument.body.append(root)\nnew Vue({\n    render:h=>h(App)\n}).$mount(root)<\/code><\/pre>\n
\uff083\uff09\u8fd0\u884c<\/p>\n
npm run serve \/\/\u67e5\u770b\u6548\u679c<\/code><\/pre>\n
\u6c42\u7f51\u7edc\u6570\u636e<\/h3>\n
npm i axios -S<\/code><\/pre>\n
<script>\nimport axios from 'axios'\nexport default {\n  name: "App",\n  data(){\n    return {\n      musics:[]\n    }\n  },\n  mounted() {\n    var url = "http:\/\/192.168.1.19:3000\/top\/playlist?cat=appblog";\n    \/\/ this.axios(url).then(res=>{\n    \/\/     console.log(res)\n    \/\/ })\n    axios.get(url).then(res=>{\n        this.musics = res.data.playlists\n    })\n  }\n};\n<\/script><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u6838\u5fc3\u6982\u5ff5 Entry | \u4ee3\u7801\u7684\u5165\u53e3,\u6253\u5305\u7684\u5165\u53e3,\u5355\u4e2a\u6216\u591a\u4e2a\u5165\u53e3 Output | \u6253\u5305\u6210\u7684\u6587\u4ef6(bundle […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34],"tags":[278],"class_list":["post-1043","post","type-post","status-publish","format-standard","hentry","category-node","tag-webpack"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1043","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=1043"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1043\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1043"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1043"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1043"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}