webpack4.0--起步篇

源碼參見https://github.com/Ching-Lee/webpack-dev

webpack安裝

具體步驟參見官網(wǎng)
官網(wǎng)：https://www.webpackjs.com/guides/getting-started/

webpack安裝

前提需要安裝node.js,webpack建議安裝到項目目錄下而非全局

  • 首先建立一個空目錄webpack_learn
  • 進(jìn)入該目錄，并初始化
    cd webpack-learn
    npm init -y
    會發(fā)現(xiàn)多出一個package.json文件在目錄下
  • 安裝webpack，對于4.0以上版本需要安裝webpack-cli
    npm install webpack webpack-cli --save-dev
    文件目錄結(jié)構(gòu)中增加node_modules,package.json,package-lock.json

webpack可以進(jìn)行0配置

  • 打包工具->輸出后的結(jié)果(js模塊)

  • 打包:支持js模塊化


webpack手動基礎(chǔ)配置

  • 默認(rèn)配置文件的名字是webpack.config.js
    在目錄下創(chuàng)建一個webpack.config.js文件
const path = require('path');

module.exports = {
  entry: './src/index.js', //入口文件
  output: {
    filename: 'bundle.js',// 出口文件
    path: path.resolve(__dirname, 'dist')
  },
  //mode默認(rèn)有兩種 開發(fā)模式：development(方便開發(fā)時看)  生產(chǎn)模式：production(默認(rèn))
  mode:'development'  
};


文件會生成到dist目錄下的bunlle.js中

  • 可以在執(zhí)行時添加--config參數(shù)+配置文件名，來指定文件
    npx webpack --config webpack.config.js
    但這樣很長不方便，所以我們可以在package.js中將該命令寫入scripts腳本。



    運(yùn)行npm run build


引入html打包插件html-webpack-plugin

目的：將src中的html文件經(jīng)webpack打包后，自動生成到dist目錄下，并且將src中的js文件加入到生成的dist目錄下的html中。

  • 插件安裝


  • 在webpack.config.js中配置插件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js', //入口文件
  output: {
    filename: 'bundle.js',// 出口文件
    path: path.resolve(__dirname, 'dist')
}，
  // 數(shù)組 放著所欲的Webpack插件
  plugins:[
  new HtmlWebpackPlugin({
    template:'./src/index.html',// 源文件
    filename:'index.html' // 生成文件
  })
  ]，

  //mode默認(rèn)有兩種 開發(fā)模式：development(方便開發(fā)時看)  生產(chǎn)模式：production(默認(rèn))
  mode:'development'  
};

打包之后看到dist目錄下出現(xiàn)index.html文件，并且其中引入了腳本



我們希望生成的dist目錄下的html被壓縮

// 數(shù)組 放著所欲的Webpack插件
  plugins:[
  new HtmlWebpackPlugin({
    template:'./src/index.html',// 源文件
    filename:'index.html', // 生成文件
    minify:{
        removeAttributeQuotes:true, //取消標(biāo)點(diǎn)
        collapseWhitespace:true, //取消空格
    },
    hash:true
  })
  ],

啟用webpack-dev-server

目前我們只能通過靜態(tài)頁面來訪問html，我們希望通過ip和端口號來訪問。
webpack內(nèi)置了此種服務(wù)，其內(nèi)部是用express實現(xiàn)的

  • 安裝webpack-dev-server


  • 啟動服務(wù)




    同時我們可以對開發(fā)服務(wù)器進(jìn)行配置
    在webpack.config.json中添加

module.exports = {
  devServer:{ //開發(fā)服務(wù)器的配置
    port:3000, //端口號
  },

在package.json添加執(zhí)行腳本

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

啟動


樣式處理

  • 安裝插件
  • webpack.config.js中添加配置
// 通過此模塊，能夠?qū)⒃趇nsex.js中import的所有.css結(jié)尾的文件，
// 打包到html中的head標(biāo)簽里面
module: {
    rules: [
    {
        test: /\.css$/,
        use: [
        'style-loader',
        'css-loader'
        ]
    }
    ]
},

  • src中新建css樣式，并在js中引入



  • 再次啟動
    npm run dev
    可以看到在head中把樣式加了進(jìn)去


樣式處理2

之前生成的css是直接使用內(nèi)聯(lián)的方式插入到html中的。

現(xiàn)在我們將css直接抽離成一個文件。

這里使用的插件是 mini-css-extract-plugin

  • 安裝
  • 更改配置
const MiniCssExtractPlugin=require('mini-css-extract-plugin');
 // 數(shù)組 放著所需要的Webpack插件
  plugins:[
  new HtmlWebpackPlugin({
        template:'./src/index.html',// 源文件
        filename:'index.html', // 生成文件
        minify:{
            removeAttributeQuotes:true, //取消標(biāo)點(diǎn)
            collapseWhitespace:true, //取消空格
        },
        hash:true
    }),
  new MiniCssExtractPlugin({
    filename:'style.css'
  })
  ],
// 通過此模塊，能夠?qū)⒃趇nsex.js中import的所有.css結(jié)尾的文件，
// 打包到html中的head標(biāo)簽里面
module: {
    rules: [
    {
        test: /\.css$/,
        use: [
        // 'style-loader',
        MiniCssExtractPlugin.loader,
        'css-loader'
        ]
    }
    ]
},

  • npm run build之后可以看到css文件


為css中樣式自動加前綴webkit等

插件：postcss-loader autoprefixer

  • 修改配置
module: {
    rules: [
    {
        test: /\.css$/,
        use: [
        // 'style-loader',
        MiniCssExtractPlugin.loader,
        'css-loader',
                // 添加
        'postcss-loader',
        ]
    }
    ]
},

同時需要新建一個postcss.config.js文件



src中的css


生成的css


壓縮css，js

  • 壓縮css
    插件 optimize-css-assets-webpack-plugin


  • 壓縮js
    插件uglifyjs-webpack-plugin
  • 修改配置文件
module.exports = {
// 添加這個部分
 optimization:{
    minimizer:[
    new UglifyJsPlugin({
        cache:ture,
        parallel:true,
        sourceMap:true
    }),
    new  OptimizeCss() 
    ]
 },
bundle.js

style.css

轉(zhuǎn)化ES6語法

我們需要將ES6轉(zhuǎn)化成ES5語法
所有插件可以在babel官網(wǎng)自助查詢https://babeljs.io/
插件：babel-loader @babel/core @babel/preset-env

  • 修改配置，添加語法
 module: {
  rules: [
  // 用于轉(zhuǎn)換es6語法
  {
    test:/\.js$/,
    use:{
      loader:'babel-loader',
      options:{
        presets:[
          '@babel/preset-env'
        ]
      }
    }
  },
  • 對于class類的語法，還是不會支持，需要插件
    @babel/plugin-proposal-class-properties
  • 對于裝飾器@，需要插件
    npm install --save-dev @babel/plugin-proposal-decorators
    修改配置
module: {
  rules: [
  // 用于轉(zhuǎn)換es6語法
  {
    test:/\.js$/,
    use:{
      loader:'babel-loader',
      options:{
        presets:[
        '@babel/preset-env'
        ],
        // 支持ES7裝飾器，class語法
        plugins:[
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose" : true }]
        ]
      }
    }
  },
  • 對于generator，include語法，需要插件@babel/runtime
    npm install --save @babel/runtime
    npm install --save-dev @babel/plugin-transform-runtime
  plugins:[
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose" : true }],
      "@babel/plugin-transform-runtime"
        ]

校驗js代碼是否符合規(guī)范ESLint

npm install --save-dev eslint eslint-loader

module: {
  rules: [ //loader默認(rèn)是從右向左，從下到上執(zhí)行。
  // 用戶處理js語法校驗
  {
    test:/\.js$/,
    use:{
      loader:'eslint-loader',
      options:{
        enforce:'pre' //previous post
      }
    }
  },

在官網(wǎng)進(jìn)行配置https://eslint.org/demo/，并下載eslintrc.json放到項目中，重命名為.eslintrc.json

image.png

webpack打包圖片

  • 在js中創(chuàng)建圖片引用
    npm install --save-dev file-loader
    配置圖片相應(yīng)規(guī)則
 // 圖片相關(guān)規(guī)則
   {
    test:/\.(png|jpg|gif)$/,
    use:'file-loader'
   }

js中創(chuàng)建圖片并引用

// 打包圖片
// 1.在js中創(chuàng)建圖片并引用
// file-loader默認(rèn)會在內(nèi)部生成一張圖片到build目錄下，并且把生成的圖片名字返回回來
let image=new Image();
console.log(logo);
image.src=logo;
document.body.appendChild(image);
  • 在css中使用圖片
    直接使用即可
body{
    background: url('./logo.png') repeat;
}

js中引入樣式

import './index.css'
  • 在html里面直接引入圖片
    插件：html-withimg-loader
    npm install --save-dev html-withimg-loader
    配置
// 在html中能使用圖片
   {
    test:/\.html$/,
    use:'html-withimg-loader'
   }
  • 優(yōu)化file-loader
    一般使用url-loader
    npm install --save-dev url-loader
    對圖片配置進(jìn)行修改
// 圖片相關(guān)規(guī)則
   {
    test:/\.(png|jpg|gif)$/,
    //use:'file-loader'
    // 做一個限制，當(dāng)圖片小于多少時，使用base64來轉(zhuǎn)化，
    // 否則使用file-loader產(chǎn)生真實圖片
    use:{
      loader:'url-loader',
      options:{
        limit:200*1024
      }
    }
   },

打包資源分類

我們希望圖片去一個目錄，css去一個目錄
在options中添加outputPath屬性。

// 圖片相關(guān)規(guī)則
   {
    test:/\.(png|jpg|gif)$/,
    //use:'file-loader'
    // 做一個限制，當(dāng)圖片小于多少時，使用base64來轉(zhuǎn)化，
    // 否則使用file-loader產(chǎn)生真實圖片
    use:{
      loader:'url-loader',
      options:{
        //limit:200*1024,
        limit:1,
        outputPath:'/img/',
        // 也可以根據(jù)情況單獨(dú)添加
        //publicPath:'http://ww.123.cn'
      }
    }
   },

 // 將css抽象到dist/css
  new MiniCssExtractPlugin({
       // 改文件路徑
    filename:'css/style.css'
  })
  ],

結(jié)果



同時我們可以設(shè)置所有資源的根目錄，publicPath，用于CDN加速，這里我們只對圖片進(jìn)行了加速，可以看到結(jié)果。


圖片前面加了前綴
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許不得轉(zhuǎn)載。 webpack介紹和使用 一、webpack介紹 1、由來 ...
    it筱竹閱讀 11,456評論 0贊 21
  • 前言 本文主要從webpack4.x入手，會對平時常用的Webpack配置一一講解，各個功能點(diǎn)都有對應(yīng)的詳細(xì)例子，...
    BetterChen閱讀 2,035評論 0贊 3
  • 目錄第1章 webpack簡介 11.1 webpack是什么？ 11.2 官網(wǎng)地址 21.3 為什么使用 web...
    lemonzoey閱讀 1,821評論 0贊 1
  • webpack 介紹 webpack 是什么 為什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert閱讀 6,663評論 2贊 71
  • 不缺吃穿的年代，營養(yǎng)都sososo的過剩，導(dǎo)致原用嬌小玲瓏來形容的女生，大多都長得高高的，雖然喊減肥聲音最...
    羊駝兒閱讀 284評論 0贊 1

友情鏈接更多精彩內(nèi)容