自己動(dòng)手搭建webpack

douzifly 發(fā)布于2019-08-22 18:20 / 3552人閱讀

摘要：初探從頭整理搭建流程主要配置入口配置輸出配置文件解析模塊配置插件配置目錄介紹存放構(gòu)建配置文件項(xiàng)目開發(fā)目錄公共靜態(tài)文件腳本文件樣式文件頁面文件初始包開發(fā)依賴這里使用版本開始搭建在文件夾下面創(chuàng)建，代碼如下在文件夾下面創(chuàng)建，任意寫幾行代碼以

wepack初探

從頭整理webpack搭建流程

webpack主要配置

entry：入口配置

output：輸出配置

module：文件解析模塊配置

plugin：插件配置

目錄介紹

build/：存放webpack構(gòu)建配置文件

src/：項(xiàng)目開發(fā)目錄

public/：公共靜態(tài)文件

script/：腳本文件

style/：樣式文件

view/：頁面文件

初始npm包

開發(fā)依賴

babel-core

babel-loader

webpack：這里使用webpack3版本

開始搭建

在build/文件夾下面創(chuàng)建webpack.dev.js，代碼如下：

const path = require("path")

module.exports = {
    entry: path.join(__dirname, "../src/script/index.js"),
    output: {
        path: path.join(__dirname, "../dist"),
        filename: "js/[name].js"
    },
    module: {
        loaders: [{
            test: /.js$/,
            use: "babel-loader"
        }]
    }
}

在src/script/文件夾下面創(chuàng)建index.js，任意寫幾行代碼以便測(cè)試

在src/view/文件夾下面創(chuàng)建index.html，引入上面的index.js文件

npm init -y或者yarn init -y創(chuàng)建package.json文件，安裝開發(fā)依賴

在package.json文件中添加scripts屬性

"scripts": {
    "dev": "rm -rf dist & webpack --config build/webpack.dev.js"
}

打開終端執(zhí)行npm run dev命令

引入html-webpack-plugin插件

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.export = {
    entry: path.join(__dirname, "../src/script/index.js"),
    output: {
        path: path.join(__dirname, "../dist"),
        filename: "js/[name].js"
    },
    module: {
        loaders: [{
            test: /.js$/,
            use: "babel-loader"
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            // 打包生成html文件名，該文件被放置在輸出目錄中
            filename: "index.html",
            // 模板文件，以該文件生成打包后的html文件
            template: path.join(__dirname, "../src/view/index.html")
        })
    ]
}