瞭解webpack-4.0版本（一）

時間 2019-11-06

標籤瞭解 webpack 4.0 版本简体版

原文原文鏈接

介紹

近期發佈了 webpack 4.0.0 的 beta 版本,若是想了解和以前版本的區別，不妨先本身搭建一個webpack的簡單應用體驗一下。css

1.簡單案例

安裝 npm i webpack --webpack-cli -Dhtml

1.1 爲了使用命令行進行打包，須要在package.json中配置

"scripts": {
    "build": "webpack --mode development",
    "dev": "webpack-dev-server --open --mode development"
  },
複製代碼

1.2 webpack.config.js配置

let path = require('path');
module.exports = {
    entry: './src/index.js',//入口配置
    output:{
      path:path.join(__dirname,'dist'),//只能寫絕對路徑，輸出文件夾
      filename:'bundle.js'//輸出文件名
    },  
    module:{
       
    },
    plugins:[

    ]
}
複製代碼

執行 npx webpack 或者 npm run build壓縮 src文件夾下的index.jsjquery

1.3 對打包後的js解讀

在bundle.js中，生成一個字執行函數，把要打包的js定義爲實參，傳入到自執行函數當中。
首先會先構建模塊的緩存，目的是爲了提升模塊的加載速度，下次直接從緩存中取

1.4 使用http服務自動訪問項目

在dist文件夾下建立index.html文件引入bundle.js
在src目錄下建立index.css 並在index.js中引入index.css

require('./index.css');
複製代碼

執行npm install style-loader css-loader並在webpack-config.js 中配置loader

rules:[
        {
          test:/\.css$/,
          loader:["style-loader","css-loader"]
        }
      ]
   },
複製代碼

執行 npm install webpack-dev-server -D
在package.json中配置 "dev": "webpack-dev-server --open --mode development",在配置--open 後，最後執行npm run dev會自動啓動服務打開預覽。
在webpack.config.js配置靜態文件服務器，能夠預覽打包後的項目

devServer:{
       contentBase:'./dist',//靜態文件跟目錄
       host:'localhost',//配置主機
       port:8080,//主機名
       compress:true//服務器返回給瀏覽器是否使用gzip壓縮
    }
複製代碼

npm run dev成功啓動項目

webpack-dev-server是一個小型的Node.jsExpress服務器,它使用webpack-dev-middleware來服務於webpack的包，咱們能夠看到產出的文件(bundle.js)，可是webpack-dev-server打包的文件會放到內存中，不可見。webpack

1.5 使用動態模板產出項目

npm i html-webpack-plugin -D 根據模板生成一個html文件
配置webpack-config.js

output:{
      path:path.join(__dirname,'dist'),//只能寫絕對路徑
      filename: '[name].[hash].js'//打包後的文件名
    },  
複製代碼

輸出文件名，改成變量加上哈希值，避免頁面引入js有緩存的狀況web

const HtmlWebpackPlugin = require('html-webpack-plugin');
  plugins:[
      new HtmlWebpackPlugin({
          template: './src/index.html',
          filename: 'index.html',
          title: 'hello world!'
      }),
    ],
複製代碼

src下建立index.html 模板文件，而且配置參數。npm

<!DOCTYPE html>
<html lang="en">E:\韓佳駿\FF\test\webpack\dist\index.html
<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><%=htmlWebpackPlugin.options.title%></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
複製代碼

npm run build dist目錄下會自動生成打包後的文件，插入js和傳入的title屬性

1.6 多入口配置

首先爲了每次build後dist下的目錄從新打包，方便查看，咱們使用json

npm i clean-webpack-plugin -D
複製代碼

引入webpack.config.js中bootstrap

const CleanWebpackPlugin = require('clean-webpack-plugin');
 plugins: [
    new CleanWebpackPlugin([path.join(__dirname, 'dist')]),
   ...
  ],

複製代碼

若是咱們多個頁面，而且每一個頁面引入的模塊不相同，該如何配置?瀏覽器

entry: {
     index:'./src/index.js',
     base:'./src/base.js'
  },
複製代碼

entry 中配置的key至關於每個代碼塊chunk,配置多個頁面時，每一個頁面配置須要的模塊緩存

plugins: [
    new CleanWebpackPlugin([path.join(__dirname, 'dist')]),
    new HtmlWebpackPlugin({
      template: './src/index.html',//指定產的HTML模板
      filename: 'index.html',
      title: 'hello index!',
      chunks:['index']
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html',//指定產的HTML模板
      filename: 'base.html',
      title: 'hello base!',
      chunks: ['base']
    }),
  ],
複製代碼

假如咱們須要引入一個公共模塊common.js,好比是jquery，咱們還要其餘模塊內部引用jquery，這時 $這個變量被封裝在模塊內部，其餘模塊沒法拿到jquery對象$，這時須要在plugin中使用一個模塊

plugins: [
      //用來自動向模塊內部注入變量
      new webpack.ProvidePlugin({
          $: 'jquery'
       }),...
複製代碼

假如咱們想把$變成全局變量，那麼要引入expose-loader，它會先加載此模塊，而後獲得模塊的導出對象，而且掛載到window

寫法：
expose-loader?全局變量名:模塊名
let $ = require('expose-loader?$!jquery');
複製代碼

或者

rules: [
       {
        test: require.resolve('jquery'),
        use: {
          loader: 'expose-loader',
           options: '$'
         }
       },
複製代碼

1.7 多個頁面配置

let pages = ['index', 'base'];
pages = pages.map(page => new HtmlWebpackPlugin({
  template: './src/index.html',//指定產的HTML模板
  filename: `${page}.html`,//產出的HTML文件名
  title: `${page}`,
  chunks: [`${page}`],//在產出的HTML文件裏引入哪些代碼塊
  hash: true,// 會在引入的js里加入查詢字符串避免緩存,
  minify: {
    removeAttributeQuotes: true
  }
}))
//....
 plugins:[
 //....
 
 ...pages
 ]
複製代碼

1.8 處理圖片

在entry 入口配置爲main.js,src文件夾下建立images目錄放入一張圖片

let src = require('./images/timg.jpg');
let img = new Image();
img.src = src;
document.body.appendChild(img);
複製代碼

npm i file-loader url-loader -D
複製代碼

{
           //file-loader是解析圖片地址，把圖片從源位置拷貝到目標位置而且修改原引用地址
           //url-loader能夠在文件比較小的時候，直接變成base64字符串內嵌到頁面中
           test: /\.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)/,
           loader: {
               loader: 'url-loader',
               options: {
                   limit: 5 * 1024,
                   //指定拷貝文件的輸出目錄
                   outputPath: 'images/'
               }
           }
       },
複製代碼

npm run build 以後順利在dist 目錄下生成一個images文件。瀏覽器也順利訪問這張圖片。

1.9 使用擴展名

resolve: {
        //引入模塊的時候，能夠不用擴展名 
        extensions: [".js", ".less", ".json"],
        alias: {//別名
            "bootstrap": "bootstrap/dist/css/bootstrap.css"
        }
複製代碼

相關標籤/搜索

每日一句

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