webpack4 入門(一)

1、簡介css

WebPack能夠看作是模塊打包機:它作的事情是,分析你的項目結構,找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言(Scss,less, TypeScript等),並將其轉換和打包爲合適的格式供瀏覽器使用。html

Webpack的工做方式是:把你的項目當作一個總體,經過一個給定的主文件(如:index.js),Webpack將從這個文件開始找到你的項目的全部依賴文件,使用loaders處理它們,最後打包爲一個(或多個)瀏覽器可識別的JavaScript文件。前端

2、起步node

1.打開cmd,建立一個demoreact

mkdir webpack4-demo && cd webpack4-demo

2.初始化packagewebpack

npm init -y

3.安裝webpack及webpack-clies6

npm i webpack webpack-cli -D

4.建立index.html和index.jsweb

mkdir src dist && touch src/index.js dist/index.html

index.htmltypescript

<!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>webpack4</title>
</head>

<body>
  <script src="./bundle.js"></script>
</body>

</html>

index.jsnpm

let h1 = document.createElement('h1');
h1.innerHTML = 'hello webpack4';
document.body.appendChild(h1);

5.建立webpack.config.js

 mkdir config && touch config/webpack.config.js

webpack.config.js

const path = require('path');

const modules = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, '../dist')
  }
}

module.exports = modules;

entry入口js,output輸出文件,filename文件名稱,path文件存放位置

6.修改package.json

"scripts": {
    "build": "webpack --config config/webpack.config.js"
  },

7.打包

npm run build

打開index.html,可以看到Hello webpack4

3、經常使用API

1.加載css

1)安裝並添加 style-loader 和 css-loader

npm install --save-dev style-loader css-loader

2)在src文件下添加style.css

h1 {
  color: red;
}

3)在index.js引入style.css

import './style.css';

4)在webpack.config.js添加module,和output同級

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

2.加載less

1)安裝並添加less less-loader

npm install --save-dev less less-loader

2)在webpack.config.js配置

rules: [
      {
        test: /\.(css|less)$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]

3)在index.js引入less文件

import './style.less'

3.加載scss

1)安裝並添加node-sass  sass-loader

npm install  node-sass sass-loader --save-dev

若是node-sass安裝不成功,請嘗試

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ -D

2)配置webpack.config.js

{
        test: /\.scss$/,
        use: [
          'style-loader',
      'css-loader',
'sass-loader' ] }

3)在index.js裏引入style.scss文件

import './style.scss'

4.css分離

1)安裝extract-text-webpack-plugin

npm install --save-dev extract-text-webpack-plugin@next

對於webpack4版本,必須裝extract-text-webpack-plugin最新版本

2)配置webpack.config.js

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      },
      {
        test: /\.less$/i,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'less-loader']
        })
      },
      {
        test: /\.scss$/i,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css'),
  ]

3)在index.js引入.css .less .scss 文件打包便可

5.加載圖片

1)安裝並添加file-loader

npm install --save-dev file-loader

2)在webpack.config.js中配置

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

3)在src文件夾下添加icon.png,在index.js引入

import Icon from './icon.png';

4)在js或css引用圖片

var myIcon = new Image();
myIcon.src = Icon;
element.appendChild(myIcon);
// css
background: url('./icon.png');

6.加載字體

1)在webpack.config.js配置

module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }

2)在src文件夾下添加my-font.woff,在style.css中添加以下代碼

 @font-face {
     font-family: 'MyFont';
     src: url('./my-font.woff') format('woff');
     font-weight: 600;
     font-style: normal;
   }
  
  h1 {
    font-family: 'MyFont';
  }

經過配置好 loader 並將字體文件放在合適的地方,你能夠經過一個 @font-face 聲明引入。本地的 url(...) 指令會被 webpack 獲取處理,就像它處理圖片資源同樣

 7.es6/es7轉換爲es5

1)安裝@babel/core @babel/preset-env babel-loader

npm i -D @babel/core babel-loader @babel/preset-env

注意:對於babel-loader@7.x,要安裝babel-core  和 babel-preset-env;對於babel-loader@8.x,要安裝@babel/core @babel/preset-env

2)配置.babelrc

{
  "presets": [
    "@babel/preset-env"
  ]
}

3)配置webpack.config.js

 module: {
    rules: [
      {
        test: /\.js$/,
        exclude: '/node_modules/',
        loader: 'babel-loader'
      }
    ]
  }

4)@babel/polyfill

Babel 默認只轉換新的 JavaScript 句法(syntax),而不轉換新的 API,好比數組的find、includes、from都不會轉碼。若是想使用這些方法,必須使用babel-polyfill,爲當前環境提供一個墊片。

npm install --save-dev @babel/polyfill

在index.js引入或者在webpack.config.js的entry引入

// index.js
import '@babel/polyfill';
// 或者在 webpack.config.js
entry: ['@babel/polyfill', './src/index.js'],

 

補充:

1.babel-polyfill 和 babel-runtime

babel-polyfill:當運行環境中並無實現的一些方法,babel-polyfill中會給作兼容
babel-runtime:將es6編譯成es5
優缺點:
babel-polyfill:引入polyfill,前端就能夠放心的在代碼裏用es6的語法來寫;可是這樣會形成全局空間污染,代碼量比較大。
babel-runtime:不會污染全局對象和內置的對象原型。好比當前運行環境不支持promise,能夠經過引入babel-runtime/core-js/promise來獲取promise,或者經過babel-plugin-transform-runtime自動重寫你的promise。缺點是不支持find、includes、Object.assign等方法。

2.babel-plugin-transform-runtime 和 babel-runtime

在babel編譯es6到es5的過程當中,babel-plugin-transform-runtime這個插件會自動polyfill es5不支持的特性,這些polyfill包就是在babel-runtime這個包裏

 

8.壓縮js

1)配置webpack.config.js

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
plugins: [
    new UglifyJSPlugin()
  ],

2)若是報錯 Cannot find module 'uglifyjs-webpack-plugin',須要安裝uglifyjs-webpack-plugin

npm install uglifyjs-webpack-plugin --save-dev

 

9.配置typescript

1)安裝typescript ts-loader

npm install --save-dev typescript ts-loader

2)在根目錄下添加tyconfig.json index.ts

tyconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  }
}

index.ts

let isTs: boolean = true;
console.log(isTs)

3)配置webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, '../dist')
  }
};

 

 

 

 

參考:

1.https://www.webpackjs.com/guides/

2.https://www.jianshu.com/p/d2c5d5190641

3.http://es6.ruanyifeng.com/#docs/intro#Babel-轉碼器

4.https://www.jianshu.com/p/a16a34eb597e

5.https://segmentfault.com/q/1010000012041869/a-1020000012044930

相關文章
相關標籤/搜索