記webpack下進行普通模塊化開發基礎配置（自動打包生成html、多入口多頁面）

寫本記時（2018-06-25）的各版本

"webpack": "^4.6.0"  //可直接使用4x以上的開發模式，刷新很快

"webpack-dev-server": "^3.1.4"   //當天安裝

"html-webpack-plugin": "^3.2.0", //當天安裝

若是要使用es6,先看其它教程安裝好babel，這裏主要記錄基於html-webpack-plugin的多頁面配置

 

html-webpack-plugin 的配置

首先裝好html-webpack-plugin，在webpack.config.js 配置2個入口文件，和濾鏡中2個出口文件（即生成2個頁面）

注意入口配置的鍵名前面加目錄，打包以後js會按路徑存放 或者在出口的filename右邊加個目錄也能夠

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin") 

//配置項
module.exports = {
    entry : {
        'index' : __dirname + '/src/index.js',
        'main' : __dirname + '/src/main.js',
        'jqueryv183min' :__dirname + '/src/jqueryv183min.js'
    },
    output:{
        path: __dirname + '/dist',
        filename:'js/[name].js',
        publicPath:'/',
    },
    devServer:{
        contentBase:path.resolve(__dirname,'./src'),
        host:'localhost',
        compress:false,
        port:8100,
        hot:false
    },
    module:{
        rules:[
            {
                test: /.js$/,
                loader: 'babel-loader?presets=es2015',
            },
            {
                test: /\.(htm|html)$/i,
                loader: 'html-withimg-loader'
            },
            {
                test:/\.(jpg|png|gif|svg)$/,
                //小於1024的圖片都用base64的方式加載
                loader: 'url-loader',
                options: {
                    limit: 1024,
                      outputPath:'images/'
                }
            },
            {
                test: /\.css$/,
                loader:[MiniCssExtractPlugin.loader,'css-loader']
            }
        ]
    },
    plugins:[
    new HtmlWebpackPlugin({
        template: __dirname + "/src/index.html",
        filename:'index.html',
        title:'哈哈',
        chunks:['jqueryv183min','index'],
        //按上面的chunks數組順序來插入js文件
        chunksSortMode: 'manual',
        minify:true,
　　　　　hash:true //這樣資源擴展名後面會增長hash值

    }),
    new HtmlWebpackPlugin({
        template: __dirname + "/src/main.html",
        filename:'main.html',
        title:'嘿嘿',
        chunks:['main'],
        chunksSortMode: 'manual'
    }),
    new MiniCssExtractPlugin({
        filename: "css/[name].css",
        chunkFilename: "[id].css"
    })
    ]
}

 

打包命令：webpack

關於打包後的各類文件路徑：

在出口配置裏添加一項publicPath:'/'，即html模板中的全部資源引用路徑，css中的圖片路徑，打包以後全部相對路徑都會替換成這個路徑，因此注意開發時的路徑配置

關於html-webpack-plugins中chunks塊的排序：

加入chunksSortMode: 'manual',  (記得修改了webpack.config.js要從新啓動dev,開發模式下才能即時生效)

 

 

webapck-dev-server配置：

---

 

    devServer:{
        contentBase:path.resolve(__dirname,'./src'),
        host:'localhost',
        compress:false,
        port:8100,
        hot:false
    },

 

 

關於webpack 4.x以上的開發模式（快速自動刷新）

---

 在package.json裏面script中加入一條：

 "dev": "webpack-dev-server  --mode  development",

而後運行cnpm run dev

 

 

html中顯示圖片，打包到文件夾

---

首先安裝file-loader、url-loader、(url-loader內置了file-loader) html-withimg-loader(這個好像不能安裝在dev下？) 

在module:{rules[]}中加入2個規則：

{
    test: /\.(htm|html)$/i,
    loader: 'html-withimg-loader'
},
{
    test:/\.(jpg|png|gif|svg)$/,
    //小於1024的圖片都用base64的方式加載
    loader: 'url-loader',
    options: {
        limit: 1024,
         outputPath:'images/'
    }
}    

 

 

以模塊方式加載css文件，抽離爲css文件獨立打包

---

舊的是用extract-text-webpack-plugin，而4.0以上已經廢棄，使用mini-css-extract-plugin

首先安裝 cnpm i style-loader css-loader mini-css-extract-plugin --save-dev

要在入口文件中引入css文件(只能以這個方式引入css,而且html-webpack-plugin會自動加載？)：import idxcss from './css/base.css'

規則中添加

{
    test: /\.css$/,
    loader:[MiniCssExtractPlugin.loader,'css-loader']
}

濾鏡中添加

new MiniCssExtractPlugin({
        filename: "css/[name].[chunkhash:8].css",
        chunkFilename: "[id].css"
    })

這樣css中的圖片也會被打包到css目錄 

 

清空打包目錄clean-webpack-plugin

---

 

安裝插件  clean-webpack-plugin

const cleanWebpackPlugin = require('clean-webpack-plugin')

new cleanWebpackPlugin(
    ['dist/*.*','dist/css/*.*','dist/js/*.*'],　 //匹配刪除的文件
    {
        root: __dirname,       　　　　　　　　　　//根目錄
        verbose:  true,        　　　　　　　　　　//開啓在控制檯輸出信息
        dry:      false        　　　　　　　　　　//啓用刪除文件
    }
)
//注，上面要匹配文件的方式來寫，不可直接寫一個dist目錄 
//網上不少不負責的文章，就直接扔一個dist進去

 

 複製靜態文件

---

 

當有一些不參與打包的文件時，使用此插件：copy-webpack-plugin

const CopyWebpackPlugin=require('copy-webpack-plugin');

new CopyWebpackPlugin([{
    from: __dirname + '/src/static',
    to: __dirname + '/dist/static'
            
}])

 

 

啓用靜態http服務器查看打包效果

---

 

爲了統一各類靜態資源的路徑，在出口配置中加入publicPathc :'/' ，全部相對路徑資源都會轉換成根目錄路徑

這時，全局安裝cnpm i -g http-server，進入打包目錄 執行 http-server ，便可啓動靜態http服務器