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