webpack4 化繁爲簡（一）

時間 2019-12-04

標籤 webpack4 webpack 简体版

原文原文鏈接

webpack4前言背景用途很少說，上來就幹。從最簡單的demo到項目中的實踐。(指令是window 平臺下，而且使用了cnpm 來安裝包的依賴.)
一.基礎demo
1.初始化項目css

npm init -y

會在項目目錄下建立package.json 文件.
2.安裝webpack webpack-clihtml

cnpm install webpack webpack-cli --save-dev

3.下面來寫最簡單的一個入門demo。建立src dist 兩個文件夾，分別用來放源碼和打包後的代碼webpack

mkdir src
mkdir dist

在src 手動建立entry.jsweb

document.getElementById('title').innerHTML='monkeykg'

在項目的根目錄建立webpack.config.js,內容以下npm

const path=require('path');
module.exports={
    mode:"development",
    entry:[
        path.join(__dirname,'./src/entry.js')
    ],
    output:{
        path:path.join(__dirname,'dist'),
        filename:'bundle.js'
    },
    // module:{},
    // plugins:[],
    // devServer:{}
}

爲了簡化webpack 運行的指令輸入，能夠在package.json文件的添加配置以下json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"npx webpack --config webpack.config.js"//手動添加
  },

能夠在命令行中運行了。。瀏覽器

npm run build

webpack最簡單的一個demo完成，在dist目錄下面會生成一個bundle.js文件，同時手動建立一個index.html在dist目錄下，內容以下webpack-dev-server

<!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>
    <div id="title"></div>
    <script src="./bundle.js"> </script>
</body>
</html>

瀏覽器運行index.html,就能夠看到打包文件的js已經生效，頁面上有 monkeykg 顯示。
附上項目的demo 的目錄結構
模塊化

二.進階
1.多個入口
webpack.config.js修改以下ui

const path=require('path');
module.exports={
    mode:"development",
    entry:[
        path.join(__dirname,'./src/entry.js'),
        path.join(__dirname,'./src/entry1.js'),//添加一個入口文件
    ],
    output:{
        path:path.join(__dirname,'dist'),
        filename:'[name].js'//出口文件
    },
    // module:{},
    // plugins:[],
    // devServer:{}
}

entry1.js文件的內容以下

document.getElementById('title').style.color='red';

刪除dist的bundle.js，而後運行npm run build，打包生成一個main.js文件。index.html修改引入script的路徑'./main.js' ,瀏覽器運行index.html,輸出紅色的 monkeykg
2.添加熱更新

cnpm install --save-dev webpack-dev-server

在webpack.config.js添加以下代碼（附圖）

const path=require('path');
const webpackDevServer=require('webpack-dev-server')
module.exports={
    mode:"development",
    entry:[
        path.join(__dirname,'./src/entry.js'),
        path.join(__dirname,'./src/entry1.js'),
    ],
    output:{
        path:path.join(__dirname,'dist'),
        filename:'[name].js'
    },
    // module:{},
    // plugins:[],
    devServer:{
        contentBase:path.join(__dirname,'dist'),
        host:'localhost',
        compress:true,
        port:8888
    }
}

package.json 添加以下

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npx webpack --config webpack.config.js",
    "server":"webpack-dev-server"
  },

命令行輸入npm run server 而後再瀏覽器打開localhost:8888,就能夠看到index.html 頁面，同時修改入口的 js代碼，會實時的刷新瀏覽器，實現了熱更新。

3.模塊化打包css，而且單獨輸出css文件
安裝包依賴 style-loader css-loader extract-text-webpack-plugin@next

cnpm install --save-dev style-loader css-loader extract-text-webpack-plugin@next

在src 新建index.css

body{
    background:red;
    color:white;
}

而且在extry.js中引入

import css form './index.css'

webpck.config.js修改以下：

const path=require('path');
const webpackDevServer=require('webpack-dev-server');
const extractTextWebpackPlugin=require('extract-text-webpack-plugin');
module.exports={
    mode:"development",
    entry:[
        path.join(__dirname,'./src/entry.js'),
        path.join(__dirname,'./src/entry1.js'),
    ],
    output:{
        path:path.join(__dirname,'dist'),
        filename:'[name].js'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:extractTextWebpackPlugin.extract({
                    fallback:"style-loader",
                    use: ['css-loader',]
                })
            }
        ]
    },
    plugins:[
        new extractTextWebpackPlugin({
            filename:'index.css'
        })
    ],
    devServer:{
        contentBase:path.join(__dirname,'dist'),
        host:'localhost',
        compress:true,
        port:8888
    }
}

刪除main.js，命令行運行 npm run build,完成打包在dist目錄會多一個index.css文件

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。