webpack基礎配置紀實

時間  2019-11-06
標籤 webpack 基礎 配置 紀實 简体版
原文   原文鏈接

GitHub 源碼javascript

entry 打包入口配置

接受三種方式：string， array， objectcss

module.exports = {
    entry: './src/main.js'
    ...
}複製代碼
module.exports = {
    entry: ['./src/main.js', './src/test.js']
    ...
}複製代碼
module.exports = {
    entry: {
        main: './src/main.js',
        test: './src/test.js'
    }
    ...
}複製代碼

output 打包導出配置

module.exports = {
    entry: {
        main: './src/main.js',
        a: './src.a.js'
    },
    output: {
        path: './dist',
        filename: 'js/[name]-[chunkhash].js',
        publicPath: 'http://cdn.com/'
    }
    ...
}複製代碼

path：打包後導出的文件路徑html

filename：打包後的文件名java

[name]對應文件名
[hash]打包文件hash值
[chunkhash]打包後每一個單獨文件的hash值複製代碼

publicPath：打包上線環境，用來替換文件路徑node

plugins 插件系統(數組)

html-webpack-plugin 自動化生成項目中的html頁面webpack

經過npm安裝git

$ npm install html-webpack-plugin --save-dev複製代碼

在webpack.config.js中github

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        main: './src/main.js',
        a: './src/a.js',
        b: './src/b.js',
        c: './src/c.js'
    },
    output: {
        path: './dist',
        filename: [name]-[chunkhash].js,
        public: 'http:cdn.com/'
    },
    plugins: [
        //建立一個htmlWebpackPlugin對象，並傳入值
        new htmlWebpackPlugin({
            template: 'index.html', //生成html文件的模板文件
            filename: 'a.html', //目標文件的名稱
            inject: false,  //插入html文檔中的位置，value分別爲 true，false，head，body
            title: 'this is a.html', // 傳入的html的title
            excludeChunks: ['b', 'c'] // 引入的除b.js 與c.js之外的js文件
        }),
        new htmlWebpackPlugin({
            template: 'index.html',
            filename: 'b.html',
            inject: false,
            title: 'this is b.html',
            excludeChunks: ['a', 'c']
        }),
        new htmlWebpackPlugin({
            template: 'index.html',
            filename: 'c.html',
            inject: false,
            title: 'this is c.html',
            excludeChunks: ['a', 'b']
        })
    ]
}複製代碼

index.html模板文件web

<!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">
    <!-- 在webpack中默認識別ejs -->
    <!-- title的值爲htmlWebpackPlugin傳入的值 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script> // js的行內引入方法 <%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %> </script>
</head>
<body>
    <!-- 再經過循環遍歷除去main.js 外聯引入對應的js -->
    <% for (var k in htmlWebpackPlugin.files.chunks) { %>
        <% if (k != 'main') { %>
            <script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks[k].entry %>"></script>
        <% } %>
    <% } %>
</body>
</html>複製代碼

關於html-webpack-plugin插件的使用，工程源碼爲多頁面應用

git clone https://github.com/kingzez/webpack-demo.git複製代碼

首先切換到

git checkout html-webpack-plugin複製代碼

並執行 npm install 完成依賴的安裝後執行 npm run webpack 查看效果。

Loaders

  • babel-loader
  • css-loader
  • style-loader
  • postcss-loader
  • less-loader
  • sass-loader
  • html-loader
  • ejs-loader
  • file-loader
  • url-loader
  • image-webpack-loader

Loader中全部項目源碼均爲單頁面應用。

Loaders 一樣也是一個數組，須要定義在一個module中

module: {
    loaders: [
        ...
    ]
}複製代碼

babel-loader

babel-loader 用於對ES6的代碼的轉換，首先在終端中執行npm

npm install --save-dev babel-loader babel-core複製代碼

而後再webpack.config.js中加入

module.exports = {
    context: '__dirname',
    entry: './src/app.js',
    output: {
        path: './dist',
        filename: 'js/[name].bundle.js'
    },
    module: {
                loaders: [{
                    test: /\.js$/,
                    loader: 'babel',
                    include: path.resolve(__dirname, 'src'), //path.resolve node的api，用於處理路徑；__dirname爲當前項目目錄，
                    exclude: path.resolve(__dirname, 'node_modules'),
                    query: {
                        presets: ['latest'] // babel的配置，可在webpack.config.js中配置也可在package.json或建立.babelrc文件
                    }
            }
        ]
    }
}複製代碼

css-loader & style-loader & postcss-loader

css-loader 用於處理css模塊的打包, style-loader 用於將打包好的css模塊插入html中,安裝

npm install --save-dev css-loader複製代碼
npm install --save-dev style-loader複製代碼

在webpack.config.js中加入

loaders: [
    {
        test: /\.css$/,
        loader: 'style-loader!css-loader' // loader處理順序是css-loader打包css文件，後經過style-loader插入到html中
    }
]複製代碼

在處理瀏覽器兼容的狀況下，須要對各個瀏覽器加前綴，這時須要css後處理器postcss-loader，安裝

npm install --save-dev postcss-loader複製代碼
npm install --save-dev autoprefixer // 自動添加前綴複製代碼

在webpack.config.js中加入

module: {
    loaders: [
        {
            test: /\.css$/,
            loader: 'style-loader!css-loader!postcss-loader' // loader處理順序post-loader處理後加上瀏覽器的前綴，再由css-loader打包css文件，後經過style-loader插入到html中
        }
    ]
},
postcss: [
    require('autoprefixer')({
        browsers: ['last 5 versions'] //瀏覽器的最新五個版本
    })
],複製代碼

若是多個css文件之間存在@import，以上配置還須要修改

module: {
    loaders: [
        {
            test: /\.css$/,
            loader: 'style!css?importLoaders=1!postcss' // css-loader的importLoaders參數能夠解決@import的css文件不處理的問題
        }
    ]
},
postcss: [
    require('autoprefixer')({
        browsers: ['last 5 versions'] //瀏覽器的最新五個版本
    })
],複製代碼

關於babel-loader css-loader style-loader postcss-loader 的使用，工程源碼

git checkout css-style-postcss-loader複製代碼

並執行 npm install 完成依賴的安裝後執行 npm run webpack 查看效果。

less-loader & sass-loader

less-loader 是對less文件進行處理打包，安裝

npm install --save-dev less-loader複製代碼

在webpack.config.js中加入

loaders: [
    {
        test: /\.less$/,
        loader: 'style!css!postcss!less'
    }
]複製代碼

關於less-loader 的使用，工程源碼

git checkout less-loader複製代碼

並執行 npm install 完成依賴的安裝後執行 npm run webpack 查看效果。

sass-loader同理不作過多介紹，簡單看一下webpack.config.js

loaders: [
    {
        test: /\.scss$/,
        loader: 'style!css!postcss!sass'
    }
]複製代碼

html-loader & ejs-loader

html-loader 和 ejs-loader 用於處理模板文件，若是你在一個js文件中import html from 'somewhere'，接着 npm run webpack 會看到報錯信息，說沒有處理器處理html文件，so 安裝

npm install --save-dev html-loader複製代碼

一樣也能夠處理ejs模板文件，該ejs模板文件的擴展名也能夠自定義，這裏咱們定義tpl

npm install --save-dev ejs-loader複製代碼

看一下在 webpack.config.js 中

loaders: [
        {
            test: /\.html$/,
            loader: 'html-loader'
        },
        {
            test: /\.tpl/,
            loader: 'ejs-loader'
        }
]複製代碼

關於html-loader ejs-loader 的使用，工程源碼，可分別執行

git checkout less-loader複製代碼

並執行 npm install 完成依賴的安裝後執行 npm run webpack 查看html-loader的效果。

git checkout ejs-loader複製代碼

並執行 npm install 完成依賴的安裝後執行 npm run webpack 查看ejs-loader的效果。

file-loader & url-loader & image-webpack-loader

用於處理圖片以及其餘文件，例子中對圖片處理，先用file-loader處理，那麼安裝

npm install --save-dev file-loader複製代碼

安裝完成後對webpack.config.js配置進行修改

loaders: [
    {
         test: /\.png|jpg|gif|svg$/i, //用於匹配各類擴展名結尾的文件
         loader: 'file-loader',
         query: {
             name: 'assets/[name]-[hash:5].[ext]' // 可選 用於將圖片打包到assets文件夾中
         }
    }
]複製代碼

在根目錄中的index.html css 中的img background 的圖片引用通常爲相對路徑，最佳解決方案爲線上的CDN絕對路徑，在模板文件中的圖片引用若是必定要使用相對路徑的話，須要這樣

<img src="${ require('../../assets/avator.png') }" />複製代碼

詳細代碼請看個人工程項目源碼，關於 file-loader 的使用，工程源碼，執行

git checkout file-loader複製代碼

並執行 npm install 完成依賴的安裝後執行 npm run webpack 查看 file-loader 的效果。

url-loader 一樣也能夠實現圖片的處理，安裝

npm install --save-dev url-loader複製代碼

安裝完成後，看一下webpack.config.js

loaders: [
    {
        test: /\.png|jpg|gif|svg$/i, // image 可用 file-loader 和 url-loader image-loader 處理
        loader: 'url-loader',
        query: {
            limit: 20000, //定義限制圖片打包大小，超過限制值，會將圖片轉成base64寫入
            name: 'assets/[name]-[hash:5].[ext]'
        }
    }
]複製代碼

較好的方案是 url-loader 與 image-webpack-loader 結合使用，安裝

npm install --save-dev image-webpack-loader複製代碼

安裝完成後，看一下webpack.config.js中

loaders: [
    {
        test: /\.png|jpg|gif|svg$/i, // image 可用 file-loader 和 url-loader image-loader 處理
        loaders: [
            'url-loader?limit=1000&name=assets/[name]-[hash:5].[ext]',
            'image-webpack'
            ]
    }
]複製代碼

首先經過 image-webpackloader 壓縮圖片後處理再由url-loader處理，經過參數limit限制圖片大小，圖片超過limit限制的值將轉成base64，若是沒超過限制值，則正常打包圖片。

關於 url-loader 與 image-webpack-loader 的使用，工程源碼，執行

git checkout image-webpack-loader複製代碼

並執行 npm install 完成依賴的安裝後執行 npm run webpack 查看 url-loader 與 image-webpack-loader 結合的效果。

完整的webpack.config.js demo查看，請執行

git checkout release複製代碼

本紀實通過本人實際操做後的記錄，算爲入門級的實踐。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程