{"id":280,"date":"2021-08-12T20:37:33","date_gmt":"2021-08-12T12:37:33","guid":{"rendered":"http:\/\/gjweb.top\/?p=280"},"modified":"2021-08-23T21:15:26","modified_gmt":"2021-08-23T13:15:26","slug":"webpack%e6%a0%b8%e5%bf%83%e6%a6%82%e5%bf%b5","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=280","title":{"rendered":"webpack\u6838\u5fc3\u6982\u5ff5"},"content":{"rendered":"\n
  1. \u8d77\u6b65<\/li>
  2. entry \u7684\u7528\u6cd5<\/li>
  3. output \u7684\u7528\u6cd5<\/li>
  4. loaders \u7684\u7528\u6cd5<\/li>
  5. plugins \u7684\u7528\u6cd5<\/li>
  6. mode \u7684\u7528\u6cd5<\/li>
  7. \u6587\u4ef6\u76d1\u542c<\/li>
  8. \u6587\u4ef6\u70ed\u66f4\u65b0<\/li>
  9. \u81ea\u52a8\u5220\u9664dist\u6587\u4ef6\u5939<\/li><\/ol>\n\n\n\n
    \n\n\n\n

    \u8d77\u6b65<\/h2>\n\n\n\n
    npm init -y \/\/\u6784\u5efa\u9879\u76ee\u6587\u4ef6
    npm install webpack webpack-cli --save-dev<\/code><\/pre>\n\n\n\n
    webpack \u9ed8\u8ba4\u7684\u914d\u7f6e\u6587\u4ef6\u4e3a webpack.config.js ; \u53ef\u4ee5\u901a\u8fc7 webpack –config \u6307\u5b9a\u914d\u7f6e\u6587\u4ef6 ; \u5e38\u89c4\u9879\u76ee\u6784\u5efa\u4f1a\u914d\u7f6e webpack.dev.js \u548c webpack.prod.js \u4e24\u4e2a\u6587\u4ef6.<\/p>\n\n\n\n
    -demo
    --package.json
    --src
    ----index.js (\u65b0\u5efa)
    --webpack.config.js (\u65b0\u5efa)<\/code><\/pre>\n\n\n\n
    \u5728 webpack.config.js \u4e2d\u5199\u5165\u914d\u7f6e\u9879<\/p>\n\n\n\n
    'use strict'
    const path = require('path');
    module.exports = {
        entry:'.\/src\/index.js',
        output:{
            path:path.join(__dirname,'dist'),
            filename:'bundle.js'
        },
        mode:'procuction'
    }<\/code><\/pre>\n\n\n\n
    \u5728 package.json \u4e2d\u914d\u7f6e npm scripts<\/p>\n\n\n\n
    \"scripts\":{
        \"build\":\"webpack\"
    }<\/code><\/pre>\n\n\n\n
    \u6253\u5305\u8fd0\u884c<\/p>\n\n\n\n
    npm run build<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    entry \u7684\u7528\u6cd5<\/h2>\n\n\n\n
    entry \u7528\u6765\u6307\u5b9a webpack \u7684\u6253\u5305\u5165\u53e3<\/p>\n\n\n\n
    \/*\u5355\u5165\u53e3*\/
    module.exprots = {
        entry:'.\/src\/index.js'
    }
    \/*\u591a\u5165\u53e3*\/
    module.export = {
        entry:{
            app:\".\/src\/app.js\",
            home:\".\/src\/home.js\"
        }
    }<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    output \u7684\u7528\u6cd5<\/h2>\n\n\n\n
    output \u7528\u6765\u6307\u5b9a webpack \u6253\u5305\u7684\u8f93\u51fa\u5165\u53e3<\/p>\n\n\n\n
    \/*\u5355\u5165\u53e3\u914d\u7f6e*\/
    module.export = {
        entry:\".\/src\/index.js\",
        output:{
            filename:'bundle.js',
            path:__dirname+\"\/dist\"
        }
    }
    \/*\u591a\u5165\u53e3\u914d\u7f6e*\/
    module.export = {
        entry:{
            app:\".\/src\/app.js\",
            home:\".\/src\/home.js\"
        },
        output:{
            filename:'[name].js',
            path:__dirname + \"\/dist\"
        }
    }<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    loaders \u7684\u7528\u6cd5<\/h2>\n\n\n\n
    webpack \u672c\u8eab\u652f\u6301 JS \u548c JSON \u4e24\u79cd\u6587\u4ef6\u7c7b\u578b,\u53ef\u4ee5\u5b89\u88c5 Loaders\u4f9d\u8d56,\u53ef\u4ee5\u5c06\u5176\u4ed6\u7c7b\u578b\u7684\u6587\u4ef6\u7f16\u8bd1\u6210\u7406\u60f3\u7684\u7ed3\u679c.<\/p>\n\n\n\n
    \u540d\u79f0<\/th>\u63cf\u8ff0<\/th><\/tr><\/thead>
    babel-loader<\/td>\u8f6c\u6362 ES6\u3001ES7 \u7b49js\u65b0\u7279\u6027\u8bed\u6cd5<\/td><\/tr>
    css-loader<\/td>\u652f\u6301.css\u6587\u4ef6\u7684\u52a0\u8f7d\u53ca\u89e3\u6790<\/td><\/tr>
    less-loader<\/td>\u5c06 less \u6587\u4ef6 \u8f6c\u6362\u4e3acss<\/td><\/tr>
    file-loader<\/td>\u8fdb\u884c\u56fe\u7247\u3001\u5b57\u4f53\u7b49\u7684\u6253\u5305<\/td><\/tr>
    raw-loader<\/td>\u5c06\u6587\u4ef6\u4ee5\u5b57\u7b26\u4e32\u7684\u5f62\u5f0f\u5bfc\u5165<\/td><\/tr>
    thread-loader<\/td>\u591a\u8fdb\u7a0b\u6253\u5305 JS \u548c CSS<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    module.exports = {
        module:{
            rules:[
                {test:\/\\.css$\/,use:['style-loader','css-loader']
            ]
        }
    }<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    Mode \u7684\u7528\u6cd5<\/h2>\n\n\n\n
    Mode \u7528\u6765\u6307\u5b9a\u5f53\u524d\u7684\u6784\u5efa\u73af\u5883\u662f: production\u3001development\u3001none<\/p>\n\n\n\n
    \u9009\u9879<\/th>\u63cf\u8ff0<\/th><\/tr><\/thead>
    development<\/td>\u8bbe\u7f6e process.env.NODE_ENV \u7684\u503c\u4e3a development<\/td><\/tr>
    production<\/td>\u8bbe\u7f6e process.env.NODE_ENV \u7684\u503c\u4e3a production<\/td><\/tr>
    none<\/td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    module.export = {
        mode: 'production'
    }<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    \u6587\u4ef6\u76d1\u542c<\/h2>\n\n\n\n
    \u5728\u6587\u4ef6\u6253\u5305\u65f6\uff0c\u76d1\u542c\u6587\u4ef6\u53d8\u5316\u5b9e\u73b0\u6587\u4ef6\u91cd\u65b0\u6253\u5305 \uff08\u7f3a\u70b9\uff1a \u6587\u4ef6\u91cd\u65b0\u6253\u5305\u7f16\u8bd1\u540e\u9875\u9762\u4e0d\u4f1a\u81ea\u52a8\u5237\u65b0\uff09<\/p>\n\n\n\n
    \/*\u4e24\u79cd\u914d\u7f6e\u65b9\u5f0f 1.\u5728package.json\u4e2d\u914d\u7f6e*\/
    \"script\":{
        \"watch\":\"webpack --watch\"
    }
    \/*\u5728 webpack.config.js \u4e2d\u914d\u7f6e*\/
    module.export = {
        watch:true
    }<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    \u6587\u4ef6\u70ed\u66f4\u65b0<\/h2>\n\n\n\n
    \u5728\u5f00\u53d1\u6a21\u5f0f\u4e0b\uff0c\u76d1\u542c\u6587\u4ef6\u53d8\u5316\uff0c\u81ea\u52a8\u7f16\u8bd1\u5e76\u5237\u65b0\uff08\u6b64\u65f6\u7684\u7f16\u8bd1\u4e0d\u4f1a\u89e6\u53d1I\/O \uff0c\u800c\u662f\u76f4\u63a5\u4ece\u5185\u5b58\u4e2d\u8c03\u7528\uff09<\/p>\n\n\n\n
    \/*\u5728 webpack.config.js \u4e2d*\/
    const webpack = require(\"webpack\")
    module.exports = {
        mode:\"development\",
        plugins:[
            new webpack.HotModuleReplacementPlugin()
        ]
    }<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    \u81ea\u52a8\u5220\u9664 dist \u6587\u4ef6\u5939<\/h2>\n\n\n\n
    \u5b89\u88c5<\/p>\n\n\n\n
    npm install clean-webpack-plugin --save-dev<\/code><\/pre>\n\n\n\n
    \u914d\u7f6e webpack.config.js \u6587\u4ef6<\/p>\n\n\n\n
    const {CleanWebpackPlugin} = require(\"clean-webpack-plugin\")\r\nmodule.esports = {\r\n    plugins:[\r\n        new CleanWebpackPlugin()\r\n    ]\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
    \u8d77\u6b65 entry \u7684\u7528\u6cd5 output \u7684\u7528\u6cd5 loaders \u7684\u7528\u6cd5 plugins \u7684\u7528\u6cd5 mode \u7684\u7528 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37],"tags":[],"class_list":["post-280","post","type-post","status-publish","format-standard","hentry","category-webpack"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=280"}],"version-history":[{"count":0,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/280\/revisions"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}