我的webpack學習筆記（一）

wh469012917 發布于2019-08-21 11:48 / 3208人閱讀

摘要：前言在上一篇文章中我介紹了學習前的準備工作，下面開始的學習。目標一般我們接觸到的關于的文章，都是以解讀官方文檔為主，而且是針對單頁面項目的應用。我先在假設要做一個多頁面應用，該如何去通過打包。

前言

在上一篇文章中我介紹了學習webpack前的準備工作，下面開始webpack的學習。

*創建webpack-demo文件夾
$ mkdir webpack-demo
$ cd webpack-demo
*初始化一份package.json
$ npm init -y
*package.json內容
{
  "name": "webpack-demo",//項目文件夾名字
  "version": "1.0.0",//項目版本號
  "description": "",//項目的簡介
  "main": "index.js",
  "scripts": {//可以通過npm執行的命令 npm run test
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",//作者
  "license": "ISC"
}

請關注package.json的內容在之后的學習中的變化。

目標

一般我們接觸到的關于webpack的文章，都是以解讀webpack官方文檔為主，而且是針對單頁面項目的應用。我先在假設要做一個多頁面應用，該如何去通過webpack打包js、css。

假設js編寫采用的是es6語法,樣式采用scss,圖標采用iconfont和小圖片，頁面假設是html（實際可能是php或者jsp等）

項目目錄如下

打包思路，在src目錄下面創建dist文件夾，我們會根據不同頁面功能打包成獨立文件夾，其中包含對應的js和css

如下圖

多頁面應用js打包

webpack安裝
$ npm install webpack --save-dev

# package.json中會出現下面屬性
 "devDependencies": {
    "webpack": "^3.2.0"
  }

babel安裝 (因為我們采用的是es6語法，所以需要通過babel來把代碼轉換成es5代碼，從而在現有環境中執行。)
$ npm install babel-loader --save-dev
$ npm install babel-core babel-preset-es2015 --save-dev
創建.babelrc文件并添加代碼 { "presets": ["es2015"] }

*在webpack.config.js中添加babel-loaders
module: {
    loaders: [
        {
            test: /.js/,
            loader: "babel",
            include: __dirname + "/src",
        }
    ],
}

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "my first webpack demo",
  "scripts": {
    "dev": "webpack"
  },
  "author": "sun",
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^3.2.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/xxxxxx（你的git名）/webpack-demo.git"
  }
}

webpack.config.js

const path = require("path")
const webpack = require("webpack") //to access built-in plugins
const fs = require("fs")
function getEntry() {
    var jsPath = path.resolve(__dirname, "src/js/app")
    var dirs = fs.readdirSync(jsPath)
    var matchs = [], files = {}
    dirs.forEach(function (item) {
        matchs = item.match(/(.+).js$/);
        if (matchs) {
            files[matchs[1]] = path.resolve(__dirname, "src/js/app", item)
        }
    })
    return files
}
module.exports = {
    entry: getEntry(),
    output: {
      path: path.join(__dirname, "src/dist"), //文件輸出目錄
      publicPath: "src/dist",        //用于配置文件發布路徑，如CDN或本地服務器
      filename: "[name]/[name].js",        //根據入口文件輸出的對應多個文件名
    },
    module: {
        loaders: [
            {
                test: /.js/,
                loader: "babel-loader",
                include: __dirname + "/src/js"
                //include設置只轉碼src/js下的js文件,不希望被轉碼的第三方js庫可以放在該目錄外
            }
        ]
    }
}

下面我們開始打包js代碼

$ npm run dev

- 執行后src/js/app下面的所有js會被分別打包到/src/js/dist下面，并且保持文件名不變，你會發現此時打包后的js不是壓縮后的代碼，如果需要壓縮代碼，需要在webpack.config.js中加入：
plugins: [
    //js文件的壓縮
    new webpack.optimize.UglifyJsPlugin({
         compress: {
             warnings: false
         }
     })
]

下一章學習多頁面scss打包

GPU云服務器云服務器學習筆記一學習筆記基礎學習筆記深度學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87125.html

我的webpack學習筆記（一）

摘要：前言在上一篇文章中我介紹了學習前的準備工作，下面開始的學習。目標一般我們接觸到的關于的文章，都是以解讀官方文檔為主，而且是針對單頁面項目的應用。我先在假設要做一個多頁面應用，該如何去通過打包。前言在上一篇文章中我介紹了學習webpack前的準備工作，下面開始webpack的學習。 *創建webpack-demo文件夾 $ mkdir webpack-demo $ cd webpac...

CrazyCodes 2019-08-29 12:54 評論0 收藏0
webpack 學習筆記（一）

摘要：引言最近在學習，發現好多知識點，之前一點都沒有接觸過，如等等。使用本地安裝，會存于文件夾內與屬性內，更方便項目文件遷移以及協同開發等情況。引言最近在學習webpack，發現好多知識點，之前一點都沒有接觸過，如babel、core-js、browserslist等等。以前習慣了使用cli構建項目，很多東西不用考慮，拿來就用，這樣的碼農是不會有能力提升的，必須了解更多的知識點，才能成為...

zhangwang 2019-08-26 10:36 評論0 收藏0
webpack入門學習手記（二）

摘要：例如現在的入門學習手記系列。收到粉絲留言和打賞的喜悅。安裝上一篇入門學習手記一，主要是介紹了的核心概念，是整個學習過程的基礎知識。新生成的類似如下入門學習手記因為生成的內容過多，我直接省略掉了。 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公眾號：前端修煉之路，歡迎關注。最近開始想要維護一個個人的公眾...

Joyven 2019-08-23 14:05 評論0 收藏0
我的webpack學習筆記（二）

前言上一篇文章我們講了多頁面js的打包，本篇文章我們繼續scss的打包。多頁面css單獨打包首先，我們css編寫采用的是sass，所以我們先來安裝sass-loader以及可以用到的依賴 $ npm install sass-loader node-sass css-loader style-loader --save-dev 安裝完loaders，下面在webpack.config.js...

mcterry 2019-08-20 18:05 評論0 收藏0