webpack4打包工具

時間  2019-12-04
標籤 webpack4 webpack 打包 工具 简体版
原文   原文鏈接

什麼是webpack

webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundlecss

能夠作的事情

代碼轉換、文件優化、代碼分割、模塊合併、自動刷新、代碼校驗、自動發佈
複製代碼

須要提早掌握的內容

  • 須要node基礎，以及npm的使用
  • 掌握es6語法

主要學習webpack哪些內容

  • webpack常見配置
  • webpack高級配置
  • webpack優化策略
  • ast抽象語法樹
  • webpack中的Tapable
  • 掌握webpack流程，手寫webpack
  • 手寫webpack中常見的loader
  • 手寫webpack中常見的plugin

建立文件

mkdir webpack-test && cd webpack-test
mkdir src
touch src/index.js
複製代碼

初始化文件

npm init -y  初始文件（默認的）
npm init 
複製代碼

開始打包

npx webpack
複製代碼

配置webpack.config.js

touch webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devServer: { // 開發服務器的配置
       contentBase: path.join(__dirname, 'dist'),
       compress: true,
       port: 3000
    },
    mode: 'development', // 模式 默認兩種production development
    entry: './src/index.js', //入口
    output: {
        filename: 'bundle.js', //打包後的文件名
        path: path.resolve(__dirname, 'dist'), //路徑必須是一個絕對路徑
    },
    plugins: [// 數組放着全部的webpack插件
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html'
        })
    ]
}
複製代碼

index.html

<!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">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="bundle.js"></script>
</body>
</html>
複製代碼

index.js

var root = document.getElementById("root");
root.innerHTML="你好"
複製代碼

webpack常見配置

npm i webpack webpack-cli -D
npm i html-webpack-plugin -D
複製代碼

使用模板 html

  • html-webpack-plugin 能夠指定template模板文件，將會在output目錄下，生成html文件，並引入打包後的js.
npm i  html-webpack-plugin -D
複製代碼

webpack-dev-server

  • webpack-dev-server提供了一個簡單的Web服務器和實時熱更新的能力
npm i webpack-dev-server -D
複製代碼

pagkage.js

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.3.1"
  }
}

複製代碼

目前的目錄

啓動項目

npm run dev
複製代碼

瀏覽器輸入http://localhost:3000/

加載樣式文件

  • 在src目錄下建立一個index.css
body{
    background-color:red;
}
複製代碼
  • 在index.js中引入index.css
require('./index.css');
複製代碼
  • webpack.config.js增長一些參數
module: { //模塊
   rules: [ // 規則 css-loader 
   //  style-loader 把css插入到head的標籤中
   //  loader的特色： 但願單一
   //  loader的用法： 字符串只用一個loader
   //  多個loader須要[]
   //  loader的順序 默認是從右向左執行
   //  loader還能夠寫出對象方式
   {
    test: /\.css$/,
    use: [
      'style-loader',
      'css-loader'
    ]
   },
   ]
}
複製代碼
  • css-loader style-loader
npm i  css-loader style-loader -D
複製代碼
  • 效果以下

加載less（sass,stylus相似）

  • 在src目錄下建立一個index.less
body{
    #root{
        border:1px yellow solid;
        color: #000;
    }
}
複製代碼
  • 在index.js中引入index.less
require('./index.css');
複製代碼
  • webpack.config.js增長一些參數
{
    test: /\.less$/,
    use: [
        {
           loader: 'style-loader',
        },
        'css-loader','less-loader'
    ]
 },
複製代碼
  • less-loader
npm i less less-loader -D
複製代碼
  • 效果以下

提取單獨打包css文件

npm i mini-css-extract-plugin -D
複製代碼
  • webpack.config.js增長一些參數
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 plugins: [ 
        new MiniCssExtractPlugin({
            filename: 'main.css'
        })
    ],
module: { //模塊
        use: [
            MiniCssExtractPlugin.loader,
        ]
       },
       {
        test: /\.less$/,
        use: [
            MiniCssExtractPlugin.loader,
        ]
       }
       ]
    }
複製代碼

css3樣式自動加前綴

npm i postcss-loader autoprefixer -D
複製代碼
  • 在webpack-test建立postcss.config.js
module.exports = {
    plugins: [require('autoprefixer')]
}
複製代碼
  • webpack.config.js增長一些參數
{
    test: /\.css$/,
    use: [
        {
           loader: 'style-loader',
        //    options: {
        //        insertAt: 'top' //內聯樣式最高級
        //    }
        },
        'css-loader',
        'postcss-loader'
    ]
    },
    {
    test: /\.less$/,
    use: [
        {
           loader: 'style-loader',
        },
        'css-loader',
        'postcss-loader',
        'less-loader'
    ]
}
複製代碼

轉化es6語法

npm i babel-loader @babel/core @babel/preset-env -D
npm i @babel/plugin-proposal-class-properties -D
複製代碼
  • webpack.config.js增長一些參數
rules: [ 
{
test: /\.js$/,
use: {
    loader: 'babel-loader',
    options: { // 用babel-loader 須要把es6-es5
      presets: [
          '@babel/preset-env'
      ],
      plugins: [
        '@babel/plugin-proposal-class-properties'
    ]
    }
}
] 
複製代碼

全局變量引入

npm i jquery -D
npm i expose-loader -D
複製代碼

第一種

  • import $ from 'jquery';
  • webpack.config.js增長一些參數
rules: [ 
        {
           test: require.resolve('jquery'),
           use: 'expose-loader?$'
        },
]
複製代碼

第二種

  • webpack.config.js增長一些參數
const webpack = require('webpack');
plugins: [ // 數組放着全部的webpack插件
    new webpack.ProvidePlugin({
        $: 'jquery' // 在每一個模塊中注入$對象
    })
],
複製代碼

引入圖片處理

// 1.在js中建立圖片來引入
// 2.在css引入backgroud('url')
// 3.<img src="" alt="" />>
npm i file-loader -D
npm i html-withimg-loader -D
複製代碼
  • webpack.config.js增長一些參數
rules: [ 
        {
          test: /\.html$/,
          use: 'html-withimg-loader'
        },
        {
         test: /\.(png|jpg|gif)$/,
         use: 'file-loader'
        },
]
複製代碼
  • 限制圖片大小
npm i url-loader -D
複製代碼
  • webpack.config.js增長一些參數
{
 test: /\.(png|jpg|gif)$/,
 use: {
     loader: 'url-loader',
     options: {
         limit: 200*1024
     }
 }
複製代碼

images和css打包分類

  • webpack.config.js增長一些參數
plugins: [ // 數組放着全部的webpack插件
    new MiniCssExtractPlugin({
        filename: 'css/main.css'
    }),
],
{
 test: /\.(png|jpg|gif)$/,
 use: {
     loader: 'url-loader',
     options: {
         limit: 1,
         outputPath: '/img/',
         publicPath: 'https://www.baidu.com' // 在圖片上加域名
     }
 }
複製代碼

多頁面打包

  • 在scr建立一個other.js
console.log("other 一路走好！")
複製代碼
  • webpack.config.js增長一些參數
// 多入口
entry: {
   index: './src/index.js', 
   home: './src/other.js',
},
output: {
    filename: '[name].js', //打包後的文件名
    path: path.resolve(__dirname, 'dist'), //路徑必須是一個絕對路徑
    // publicPath: 'https://www.baidu.com'
},
plugins: [ // 數組放着全部的webpack插件
    new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: 'index.html',
        chunks: ['index']
    }),
    new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: 'home.html',
        chunks: ['home']
    }),
]
複製代碼

配置source-map調試代碼

  • webpack.config.js增長一些參數
output: {
    filename: '[name].js', //打包後的文件名
    path: path.resolve(__dirname, 'dist'), //路徑必須是一個絕對路徑
    // publicPath: 'https://www.baidu.com'
},
// devtool: 'source-map', // 1.增長映射文件 能夠幫咱們調試源代碼
// devtool: 'eval-source-map', // 2.不會產生單獨的文件,可是能夠顯示行和列
// devtool: 'cheap-module-source-map', // 3.不會產生列，可是是一個單獨的映射文件（產生後你能夠保留起來）
devtool: 'cheap-module-eval-source-map',// 4.不會長生文件，集成在打包後的文件中不會產生列
複製代碼

watch實時打包

  • webpack.config.js增長一些參數
entry: {
   index: './src/index.js', 
   home: './src/other.js',
},
watch: true,
watchOptions: { // 監控的選項
  poll: 1000, // 每秒問我1000次
  aggregateTimeout: 500, // 防抖
  ignored: /node_modules/ // 不須要進行監控哪一個文件
},
複製代碼

經常使用的小插件

  • 清除dist (clean-webpack-plugin)
  • 拷貝文件(copy-webpack-plugin)
  • 版權註釋(bannerPlugin)
npm i clean-webpack-plugin -D
npm i copy-webpack-plugin -D
複製代碼
  • 在webpack-test建立doc文件,裏面建立hello.txt
  • webpack.config.js增長一些參數
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
plugins: [ 
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin([
        {from: 'doc', to: './'}
    ]),
    new webpack.BannerPlugin('cl by 2019')
],
複製代碼

webpack跨域問題

npm i express -D
複製代碼
  • 1)webpack代理
  • 在webpack-test目錄下建立server.js
let express = require('express');
let app = express();
app.get('/user', (req, res)=> {
    res.json({ name: "xiaolin3333" })
})
app.listen(3000);
複製代碼
  • webpack.config.js配置
devServer: { // 開發服務器的配置
    // 1)http:proxy
     proxy: {// 從新的方式 把請求代理到express服務器!
        '/api': {
            target: 'http://localhost:3000',
            pathRewrite: {'/api': ''}
        } // 配置了一個代理
     }
    },
複製代碼
  • index.js
let xhr = new XMLHttpRequest();

xhr.open('GET', '/api/user', true);

xhr.onload = function() {
    console.log(xhr.response,);
}

xhr.send();
複製代碼
  • 啓動 node server.js && npm run dev
  • 2)前端只想單純來模擬數據
  • webpack.config.js配置
devServer: { // 開發服務器的配置
    // 2)前端只想單純來模擬數據
     before(app) { // 提供的方法 鉤子
         app.get('/user', (req, res)=> {
             res.json({ name: "xiaolinwww" })
         })
     }
複製代碼
  • index.js
let xhr = new XMLHttpRequest();
xhr.open('GET', '/user', true);

xhr.onload = function() {
    console.log(xhr.response,);
}

xhr.send();
複製代碼
  • 啓動 npm run dev
  • 3）有服務端 不想用代理來處理 能不能再服務端中啓動webpack端口用服務端口
npm i webpack-dev-middleware -D
複製代碼
  • server.js
let express = require('express');

let app = express();
let webpack = require('webpack');

// 中間件
let middle = require('webpack-dev-middleware');

let config = require('./webpack.config');

let compiler = webpack(config);

app.use(middle(compiler));

app.get('/user', (req, res)=> {
    res.json({ name: "xiaolin3333-webpack-dev-middleware" })
})

app.listen(3000);
複製代碼
  • index.js
let xhr = new XMLHttpRequest();
xhr.open('GET', '/user', true);

xhr.onload = function() {
    console.log(xhr.response,);
}

xhr.send();
複製代碼

resolve屬性的配置

yarn add css-loader style-loader -D
複製代碼
  • index.js
import './style';

style.css

body{
    background-color:green;
    transform: rotate(90deg);
}
複製代碼
  • webpack.config.js配置
resolve: {// 解析第三方包 common
   modules: [path.resolve('node_modules')],
   extensions: ['.js','.css','.vue']
//    alias: { // 別名 vue vue.runtime
//       bootstrap: 'bootstrap/dist/css/bootstrap.css'
//    },
//    mainFields: ['style', 'main']
//    mainFields: [],// 入口文件的名字index.js
},
 module: { //模塊
   rules: [ 
       {
          test: /\.css$/,
          use: ['style-loader','css-loader']
       },
    ]
}
複製代碼

項目文件未更新

今天到此結束，明天更新。。。。

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