初識webpack，搭建webpack4+typescript+scss入門項目

時間 2019-11-16

標籤 webpack 搭建 webpack4+typescript+scss typescript scss 入門項目简体版

原文原文鏈接

爲什要使用webPack

隨着大前端的來臨，須要前端處理愈來愈多的事情，不只侷限頁面的交互，項目的需求愈來愈多，更多的邏輯須要在前端完成，爲了簡化開發的複雜度，前端社區涌現出了不少好的實踐方法。javascript

模塊化，一種將複雜系統分解爲可管理模塊的方式，簡單來講就是解耦，簡化開發，一個模塊就是實現特定功能的文件，想要什麼功能，就加載什麼模塊，完美的實現了代碼重用。其中三大劍客即是Angular,React和Vue
JavaScript的拓展的開發語言typescript，可以實現目前版本的JavaScript不能直接使用的特性，而且以後還能轉換爲瀏覽器可識別的javascript語言
scss less等CSS預處理器

這些改進確實大大的提升了咱們的開發效率，可是利用它們開發的文件每每須要進行額外的處理才能讓瀏覽器識別,而手動處理又是很是繁瑣的，這就爲webPack類的工具的出現提供了需求。css

webpack是什麼

webpack是一個模塊打包工具，它能夠將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還能夠將按需加載的模塊進行代碼分割，等到實際須要的時候再異步加載。html

webpack支持的模塊

ES2015 import語句
CommonJS require()語句
AMD define 和 require語句
css/sass/less文件的 @import 語句
樣式 (url(...)) 或 HTML文件(<img src=...>) 中的圖片連接(image url)

webPack的特色

豐富的插件，方便進行開發工做
大量的加載器，包括加載各類靜態資源
代碼分割，提供按需加載的能力
發佈工具

webpack的工做方式

把項目當作一個總體，經過一個給定的主文件（如：index.js），從這個文件開始找到你的項目的全部依賴文件，使用loaders處理它們，最後打包爲一個（或多個）瀏覽器可識別的JavaScript文件。前端

開始項目搭建

1.全局安裝webpack

npm install -g webpack

2.建立練習文件夾

mkdir  webpack_pratice

3.建立package.json文件

進入到webpack_pratice,建立package.json文件,在終端中使用npm init命令能夠自動建立這個package.json文件java

npm init

輸入這個命令後，終端會問你一系列諸如項目名稱，項目描述，做者等信息，不過不用擔憂，若是你不許備在npm中發佈你的模塊，這些問題的答案都不重要，回車默認便可。
package.json是一個標準的npm說明文件，裏面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務等等。node

4.安裝項目須要模塊

npm install webpack webpack-cli  --save-dev
 npm install typescript ts-loader --save-dev     
 npm install style-loade  node-sass sass-loader css-loader --save-dev
 npm install extract-text-webpack-plugin@next   --save-dev   
 npm install html-webpack-plugin  --save-dev

注意：extract-text-webpack-plugin 最新版本爲 3.0.2，這個版本尚未適應 webpack 4 的版本，因此安裝的時候須要extract-text-webpack-plugin@nextwebpack

5.構建項目結構

a.建立src目錄，增長index.html main.ts common.scss main.scss

index.htmlgit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack測試</title>
</head>
<body>
    <div class="test-block">
        Webpack
    </div>
</body>
</html>

main.tsgithub

import './main.scss'

class TestMain {
    name: string;
    age: number;
    constructor ( name: string, age: number ) {
        this.name = name;
        this.age = age;
    };

    testFun() {
        console.log(this.name +　'---' + this.age)
    }
}


let testMain = new TestMain("Miss D", 18);
testMain.testFun();

common.scssweb

html,body{
  margin: 0;
  padding: 0;
  font-size: 25px;
  color: yellow;
}

main.scss

@import "common.scss";

.test-block{
  width: 300px;
  height: 300px;
  margin: 0 auto;
  background: green;
}

b.建立dist文件夾
c.建立TypeScript的配置文件tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

d.建立webpack的配置文件webpack.config.js

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: './src/main.ts', //模塊的入口
    output: { //輸出配置
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: { //資源模塊的處理器
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: path.resolve(__dirname, 'node_modules'),
                include: path.resolve(__dirname, 'src'),
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: {
                        loader: "style-loader"
                    },
                    use: [
                        {
                            loader: "css-loader",
                        },
                        {
                            loader: "sass-loader"
                        }
                    ]
                })
            }]
    },
    plugins: [ //插件配置
        new ExtractTextPlugin({
            filename: "[name].min.css"
        }),
        new htmlWebpackPlugin({
            template: './src/index.html',
            inject: 'head'
        })
    ]
}

e.項目文件夾結構

6.package.js配置build執行腳本

{
  "name": "webpack-pratice",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "css-loader": "^2.1.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "ts-loader": "^5.3.3",
    "typescript": "^3.3.3333",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3"
  }
}

7.執行打包命令

npm run build

打包結果

7.運行index.html

項目的scss樣式和typescript文件，解析成瀏覽器能識別的css和javascript文件，且自動引入到index.html文件中。

官方參考

webpack官網連接描述
html-webpack-plugin插件連接描述
extract-text-webpack-plugin插件連接描述

踩坑

若是使用webpack，style-loader出現的錯誤：

ERROR in {project}/node_modules/style-loader/lib/addStyles.js
Module not found: Error: Can't resolve './urls' in '{project}\node_modules\style-loader\lib'

解決方法：直接修改{project}/node_modules/style-loader/lib/addStyles.js文件：把require(「./urls」)改成require(「./urls.js」)

相關標籤/搜索

每日一句

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