[初級]webpack4基本操做(一)

時間 2019-12-06

標籤初級 webpack4 webpack 基本简体版

原文原文鏈接

前言

這篇文章是本人根據gitchat上面的文章學習總結的,針對webpack4作了修改,各位看官能夠直接移步原文,講的更爲詳細一些
固然,若是隻是想要快速入門並跳過一些webpack4的坑的話,能夠看下這篇文章,20分鐘足夠css

構建一個最基礎的項目

app.js: 入口文件,webpack會加載其中全部的依賴(require,import的內容)
module.js: 模塊文件,在app.js中間使用
compiled.js: 編譯過的項目文件,咱們在index.html中引用

首先,咱們須要一個頁面index.html: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>
  <script src="dist/compiled.js"></script>
</head>
<body>

</body>
</html>

咱們建立一個app.jswebpack

import log from "./module.js"
document.write("app was loaded!")
log()

以及module.jsgit

export default  function(){
  document.write("module has been loaded!")
}

咱們還須要在目錄下建一個dist文件夾,用來存放咱們編譯後的文件

寫好之後,咱們還須要寫webpack配置文件,新建webpack.config.js:github

const path = require("path")

module.exports= {
  entry: "./app.js",
  output:{
    path: path.join(__dirname,"dist"),
    filename: "compiled.js"
  },
  mode: "development" 
}

entry: 入口文件,能夠有多個,webpack會根據每一個入口文件來打包
output: 出口文件,path爲文件路徑
mode: webpack4新增的選項,production/development兩種模式適應不一樣場景

這裏有mode詳細的解釋
寫好了以後,咱們全局安裝一下webpackweb

npm i -g webpack

而後在命令行運行npm

webpack

打開咱們的index.html,就能夠看到網頁了promise

熱加載網頁

當咱們開發的時候也但願保存文件就能夠看到效果吧?
使用一個熱門框架webpack-dev-server能夠作到這一點:app

npm i -g webpack-dev-server

安裝完之後,咱們還須要在webpack.config.js中修改一下:框架

const path = require("path")

module.exports= {
  entry: "./app.js",
  output:{
    path: path.join(__dirname,"dist"),
    filename: "compiled.js"
  },
  devServer:{
      port: 3000,
      publicPath: "/dist/"
  },
  mode: "development"
}

port: 端口名
publicPath: 須要加載外部資源的文件路徑,咱們這裏先註釋一下

如今運行webpack-dev-server,打開localhost:3000,就能夠看到咱們的頁面了
修改app.js 或者 module.js,保存之後能夠實時看到結果.

異步的代碼

咱們也能夠修改咱們的代碼,讓webpack支持異步的代碼:
webpack.config.js:

const path = require("path")

module.exports= {
  entry: "./app.js",
  output:{
    path: path.join(__dirname,"dist"),
    publicPath: "./dist/",
    filename: "compiled.js"
  },
  devServer:{
      port: 3000,
      publicPath: "/dist/"
  },
  mode: "development"
}

這裏咱們添加了output中的oublicPath,這裏是輸出文件的路徑，若是沒有的話使用異步代碼會報錯

app.js:

import log from "./module.js"
import('./async.js').then(module=>{
    module.log()
}).catch(err=>{throw new Error("An error happend!:"+err)})
document.write("app was loaded!")
log()

咱們使用相似promise語法的方式來處理異步請求
async.js:

export const log = function(){
    console.log("I'm async")
}

若是運行了webpack-dev-server,那麼你應該看到結果了，若是沒有的話運行webpack就能看到了

樣式相關

咱們在開發需求中須要樣式，webpack使用動態生成的方式將咱們的樣式內嵌到頁面文件當中
新建index.css

body{
    padding: 200px;
    text-align: center;
    color: white;
    background-color: #666
}

而後在app.js中導入:

import './index.css'

這時，咱們的樣式就導入進去了。可是webpack並無內置任何的載入器，咱們須要手動下載和配置(其實強烈推薦yarn)

npm i css-loader --save-dev
npm i style-loader --save-dev

咱們再在webpack.config.js中加上:

module:{
    rules: [
      {
          test: /\.css$/,
          loader: 'style-loader!css-loader'
      }
    ]
  }

這是webpack4的寫法，全部的模組都裝在這裏面，增長易讀性
其中loader的解析順序是從右到左，和咱們的閱讀順序相反。

資源壓縮

經常使用的有咱們的uglify插件

npm i uglifyjs-webpack-plugin --save-dev

而後在咱們的webpack裏面引用：

const uglify = require("uglifyjs-webpack-plugin")

plugins: [
    new uglify()     
  ]

記得要加逗號哦，保存完了webpack一下
咱們打開compiled.js，發現是這樣的：
這樣能夠減小咱們代碼的體積，固然，易讀性就不存在了

相關標籤/搜索

每日一句

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