webpack學習的記錄（三）一篇帶你搭建一個webpack4.0

這個是工程鏈接 https://github.com/soGooday/canvasWF

前言

筆者爲了學習webpack感覺也是走了不少的彎路。有很多點想知道，但是找不到。下面筆者就帶着大家帶着你快速的入門。

這篇文章的宗旨的-我先帶着你搭建起來。等你能跑通了，再去看那這些參數是做什麼的，我會把官方的鏈接放在需要使用到的代碼下面

默認你已經安裝好了node.js

下面我們先初始化一個node.js的環境

我們需要提前知道的是webpack是webpack node.js是node.js 我們第一步是創建一個node.js 跟webpack還沒有關係。打開一個文件夾，crtl+鼠標右鍵->從此處打開命令窗口然後我們在cmd上面輸入下面的指令，初始化node.js的環境。爲搭建webpack做基礎

npm init -y

然後呢你就會看下面的圖片

安裝webpack

然後呢我們開始安裝webpack與webpack-cli的包

這一步我們纔開始安裝webpack的，之前並沒有

怎麼安裝呢還是在命令行下面輸入下面內容

npm install webpack webpack-cli -D

然後你就會看到多出來的東西。這些東西，才使得我們真正的創建好了webpack的環境。

那我們如何使用webpack呢

跟我一起來。

在剛剛創建的文件甲裏面創建一文件 src

然後在src裏面創建一個index.js，因爲src/index.js是webpack默認的開始打包的文件，其實我們可以通過配置webpack.config.js來修改這個路徑，但是這個我們後面再管。我們現在的第一要義就是讓webPack跑起來

在index.js裏面寫一句話

console.log('你好呀，我是來測試的');

好像我剛剛有人叫我說等下你，你遇見了使用上面的指令出現了 webpack不可見指令的報錯就是下面的這附圖，爲了模擬的神東，你就把a當做是webpack

不過沒有關係，我帶你去處理

安裝下面的指令我們全局安裝就會處理掉這個問題

然後我們在根目錄下，再次打開剛剛我們輸入指令的地方。是的就是把剛剛的-D換成可-g

npm install webpack webpack-cli -g

這樣的話你是不是就沒有問題啦。什麼你問我爲什麼會這樣。等你看完下面這位大大寫的文章，我想你就明白了

https://blog.csdn.net/weixin_44135121/article/details/90513634

打包&啓動

我們輸入如下的指令

webpack --mode=development

是不是看到了下面的平曠，恭喜你，已經學會了使用webpack進行打打包了，

配置package.json

好了，如果你並不知道剛剛的指令是做什麼的。不着急，搜索一下，你就會明白，但是我們並不知我們目的，目的是帶你快速搭建起來webpack包

我們打開package.json文件是的就是下面這個

我們呢要寫上幾句話

因爲這樣我們就可以使用一些簡單的指令了

    "build:d": "webpack --mode=development --progress --color",
    "build:p": "webpack --mode=production --progress --color",
     "dev": "webpack-dev-server --inline --open"//這個是邊寫邊測試而是用的

本地邊寫邊看效果

下面我們就來看下怎麼實現這個功能

還是剛剛cmd的命令行工具（根目錄下）輸入如下的指令

npm install webpack-dev-server -D

成功之後

在cmd繼續輸入

npm install html-webpack-plugin -D

上面的啷個指令按鈕的東西，在下面你會用得到哦

寫一個這樣爲js文件

webpack.config.js

內容是

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

module.exports = {
    entry: {
        app: './src/index.js', 
      },
      output: {
        filename: '[name].js',
        path: __dirname + '/dist'
      },
    plugins:[
        new HtmlWebpackPlugin(), 
    ]
}

我知道你想問這是幹嘛的，我們先跑起來再說，上面的處理完畢，我們就要顯示了

在剛剛的cmd指令框中打入如下的指令

npm run dev

你就會看見

按住ctrl然後自動調取瀏覽器，但是你會看見空白的瀏覽器頁面，沒關係，打開開發者模式谷歌瀏覽器默認是F12

是不是看見自己的剛剛寫的話了。我下面還會繼續寫

index.htm模板

經過前面的探索，我猜你肯定會問，那我怎麼定製自己的index.html。而不是生成壓縮 index.js的這個入口文件。然後再生成

dist的文件下手動的創建index.html然後在手動的引入相應的腳本。

下面我們就學習如何完成這個需求。

在根目錄下打開cmd。然後我們需要安裝上html-webpack-plugin,這個npm 的包

npm install html-webpack-plugin -D

然後呢我們就需要處配置的使用一下。webpack.config.js這個文件。

我們在根目錄下創建一個文件名字加後綴=webpack.config.js

然後打開打開這個文件如下

下面書具體的內容

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


module.exports ={
    entry: './src/index.js',//這個是我們的入口文件
    output: {
        path: path.resolve(__dirname, 'dist'),//這個設置生成爲文件放在那裏
        filename: 'bundle.js',//生成的js文件名字叫什麼
    },
    plugins: [//插件 及的是  plugins 而不是 plugin
        new HtmlWebpackPlugin({
          filename: 'index.html', // 配置輸出文件名和路徑
          template: './src/index.html', // 配置文件模板--
        }),
      ],

}
上面就是這個這個具體的文件

其中的插件我們之使用到了 2個參數分別是模板路徑及其生成模板的名字
 new HtmlWebpackPlugin({
          filename: 'index.html', // 配置輸出文件名和路徑
          template: './src/index.html', // 配置文件模板--
        }),
下面就是模板的文件

此時的你才一次使用 npm run build:d 你就會發現在disti下面生成了相關的兩個文件

此時我們使用 npm run dev 進入到dist的目錄下我們就看到了

構建 CSS

我們需要使用兩個兩個 loader

css-loader 負責解析 CSS 代碼，主要是爲了處理 CSS 中的依賴，例如 @import 和 url() 等引用外部文件的聲明；
style-loader 會將 css-loader 解析的結果轉變成 JS 代碼，運行時動態插入 style 標籤來讓 CSS 代碼生效

npm install css-loader style-loader -D

經由上述兩個 loader 的處理後，CSS 代碼會轉變爲 JS，和 index.js 一起打包了。

然後我們在webpack.config.js裏面添加下面的相關代碼，這個意思就是如何使用我們上面的的兩個loadier

module.exports = {
//主要是下面的這些代碼
  module: {
    rules: [
      // ...
      {
        test: /\.css/,
        include: [
          path.resolve(__dirname, 'src'),
        ],
        use: [
          'style-loader',
          'css-loader',
        ],
      },
    ],
  }
}
同時我們在src的目錄下創建一個文件名字叫做index.css

然後在src的目錄下的index.js 上面寫上
import "./index.css"
這樣就可以使用webpack咋打包的時候，會自動打包到然後的js文件中（因爲單反是入口文件使用到的相關文件都會被webpack處理掉）；

爲了測試使用。我們在src的index.html的文件中
<body>
    <p>我是來測試css的引用的</p>
</body>
然後我們使用 npm run dev我們就會看到如下界面

說明我們這一步CSS 預處理器是成功了

CSS 預處理器

在上述使用 CSS 的基礎上，通常我們會使用 Less/Sass 等 CSS 預處理器，webpack 可以通過添加對應的 loader 來支持，以使用 Less 爲例，我們可以在官方文檔中找到對應的 loader。

我們需要在上面的 webpack.config.js 配置中，添加一個配置來支持解析後綴爲 .less 的文件：

我們需要安裝上less

npm install less-loader -D

module.exports = {
  // 主要部分 是下面的代碼
  module: {
    rules: [
     {
        test: /\.less/,
        include: [
          path.resolve(__dirname, 'src'),
        ],
        use: [
          'style-loader',
          'css-loader',
        ],
      },
    ],
  },
  // ...
}

處理圖片文件

在前端項目的樣式中總會使用到圖片，雖然我們已經提到 css-loader 會解析樣式中用 url() 引用的文件路徑，但是圖片對應的 jpg/png/gif 等文件格式，webpack 處理不了。是的，我們只要添加一個處理圖片的 loader 配置就可以了，現有的 file-loader 就是個不錯的選擇。

file-loader 可以用於處理很多類型的文件，它的主要作用是直接輸出文件，把構建後的文件路徑返回。配置很簡單，在 rules中添加一個字段，增加圖片類型文件的解析配置：

老規矩，在根目錄下我們先安裝一下。下面的相關內容

npm install file-loader -D

在webpack.config.js中添加如下的內容

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {},
          },
        ],
      },
    ],
  },
}

使用 Babel

Babel 是一個讓我們能夠使用 ES 新特性的 JS 編譯工具，我們可以在 webpack 中配置 Babel，以便使用 ES6、ES7 標準來編寫 JS 代碼。

具體的安裝看下這個網址

https://blog.csdn.net/weixin_44539392/article/details/86532913

安裝一下如下的包
npm i [email protected]
npm i [email protected]
npm i [email protected]
npm i [email protected]
npm i [email protected]
三.創建配置文件,在項目根目錄下創建一個名爲 “.babelrc” 的文件，注意該文件名前面有一個點,填寫如下內容
{
  "presets": ["env","stage-0"],
  "plugins": ["transform-runtime"]
}
打開webpack.config.js配置文件(如果沒有該文件你需要手動去創建,然後可以去webpack的官網找到相應的配置)填寫如下配置
module: {
      rules: [
        {test: /\.js$/,exclude: /(node_modules)/,use: "babel-loader"}
      ]
}

exclude這個必須加,如果不加的話在打包的時候會吧node_modules目錄下的js文件也一起打包過去，這樣的話會耗費電腦的資源，同時打包出來的文件也無法使用。
此內容來自 https://www.cnblogs.com/Richard-Tang/p/9875607.html 大佬的教程

webpack.config.js

下面有幾個plugin是我自己添加的一些作用比如壓縮 copy圖片及其自動清除dist目錄

const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const uglify = require('uglifyjs-webpack-plugin'); //js壓縮插件
const path = require('path');

module.exports = {
    entry:'./src/index.js',
    output: {
      filename: 'index.js',
      path: __dirname + '/dist',
      // publicPath:'./src/'
    },
    plugins:[ 
        new HtmlWebpackPlugin({
            filename: 'index.html', // 配置輸出文件名和路徑
            template: './src/index.html', // 配置文件模板
        }), 
        
        new CleanWebpackPlugin(),
        new uglify(
          // {//js壓縮插件
          // cache: false,//啓用文件緩存
          // parallel: true,//使用多進程並行運行來提高構建速度
          // sourcMap: true//使用源映射將錯誤消息位置映射到模塊（這會減慢編譯速度）
          // }
        ),
        new CopyWebpackPlugin([
          {
            from: './src/images',
            to: './images',
            ignore: ['.*']
          }
      ])
    ],
    module: {
      rules: [
        // 對css的解析
        {
          test: /\.css/,
          include: [
            path.resolve(__dirname, 'src'),
          ],
          use: [
            'style-loader',
            'css-loader',
          ],
        }, 
        {
          test: /\.(png|jpe?g|gif)$/i,
          use: [
            {
              // loader: 'file-loader',
              loader: 'url-loader?limit=1024&name=./images/[name].[ext]'//這個會把你打出來的包 放在dist的image下面
            },
          ],
        },
        {test: /\.js$/,exclude: /(node_modules)/,use: "babel-loader"},
        // {
        //   test: /\.css$/,
        //   use: ["style-loader", "css-loader", "postcss-loader"]
        // },
     // HTML中的圖片
    //  {
    //   test: /\.(htm|html)$/i,
    //   use: ['html-withimg-loader']
    // },
      ],
       
    },
    // resolve:{
    //   alias:{
    //     images: path.resolve(__dirname, 'src/images')
    //   }
    // },
    devServer: {
      //設置基本結構
      // contentBase: path.resolve(__dirname, './dist'),
      contentBase: path.resolve(__dirname, './src/'),//這個很關鍵他是決定打開文件之後從那個頁面座位主頁面
      host: 'localhost',//服務器IP地址,可以是localhost
      compress: true,//服務端壓縮是否開啓
      open: true,// 自動打開瀏覽器
      hot: true ,// 開啓熱更新 
    }

}

webpack學習的記錄（三）一篇帶你搭建一個webpack4.0

這個是工程鏈接 https://github.com/soGooday/canvasWF

前言

默認你已經安裝好了node.js

安裝webpack

那我們如何使用webpack呢

打包&啓動

配置package.json

本地邊寫邊看效果

index.htm模板

構建 CSS

CSS 預處理器

處理圖片文件

使用 Babel

webpack.config.js

寫一個webpack中雪碧圖的loader

webpack學習的記錄（三）一篇帶你搭建一個webpack4.0

webGl shader的學習記錄(六)：如何畫出一個漸變色填充的三角形

webGl shader的學習記錄(二)js 與(glsl語言) OpenGL ES之間如何進行交互？及其如何在js中對vertexShader與fragmentShader進行賦值

文字添加邊框

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

webpack學習的記錄（三） 一篇帶你搭建一個webpack4.0

這個是工程鏈接 https://github.com/soGooday/canvasWF

前言

默認你已經安裝好了node.js

安裝webpack

那我們如何使用webpack呢

打包&啓動

配置package.json

本地邊寫邊看效果

index.htm模板

構建 CSS

CSS 預處理器

處理圖片文件

使用 Babel

webpack.config.js

webpack學習的記錄（三）一篇帶你搭建一個webpack4.0