阮一峯之webpack-demos(譯）

時間 2019-11-18

標籤 webpack demos 简体版

原文原文鏈接

　　最近因開始學ReactJS,發現ReactJS跟webpack這個模塊化打包工具絕配，又開始找webpack的資料學。。。。。。在本尊千辛萬苦的看了衆多資料下，仍是感受阮大神寫的這個demo簡單明瞭，深刻淺出，很適合新手學習，可是由於資料是全英文寫的，本身在學習的過程當中就順當翻譯了下，如下爲原文地址連接： https://github.com/ruanyf/webpack-demos#demo01-entry-file-source javascript

怎樣使用

首先，全局安裝 webpack 和 webpack-dev-servercss

$ npm i -g webpack webpack-dev-server

其次，克隆該版本庫並安裝依賴html

$ git clone git@github.com:ruanyf/webpack-demos.git
$ cd webpack-demos
$ npm install

如今，從版本庫demo文件夾裏資源文件開始前端

$ cd demo01
$ webpack-dev-server

用你的瀏覽器打開http://127.0.0.1:8080java

前言：Webpack是什麼

Webpack是一個像Grunt和Gulp同樣的前端構建系統node

它相似Browserify，可被用做模塊打包而且可以作的更多react

$ browserify main.js > bundle.js
# be equivalent to $ webpack main.js bundle.js

它的配置文件是Webpack.config.jswebpack

// webpack.config.js
module.exports = { entry: './main.js', output: { filename: 'bundle.js' } };

在有Webpack.config.js以後，你能不輸入任何參數調用Webpackgit

$ webpack

你應該知道一些命令行選項github

webpack --------- 進行一次開發模式編譯　　　　
webpack -p ----- 進行一次生產模式編譯
webpack --watch -------- 持續增量式監控編譯
webpack -d ------- 生成source maps
webpack --colors ------- 顯示靜態資源的顏色
webpack --display-error-details ------- 顯示更多報錯信息

爲了應用運行的準備，你能像下面那樣寫在你的package.json文件的scripts裏

// package.json
{
  // ... "scripts": { "dev": "webpack-dev-server --devtool eval --progress --colors", "deploy": "NODE_ENV=production webpack -p" }, // ... }

索引

1.入口文件

2.多個入口文件

3.Babel加載器

4.CSS加載器

5.Image加載器

6.CSS模塊

7.UglifyJs插件

8.HTML Webpack Plugin and Open Browser Webpack Plugin

Demo01:入口文件

入口文件是一個Webpack將準備編譯爲bundle.js的文件

例如：main.js是一個入口文件

// main.js
document.write('<h1>Hello World</h1>');

index.html

<html>
  <body>  <script type="text/javascript" src="bundle.js"></script> </body> </html>

Webpack按照配置文件編譯成bundle.js

// webpack.config.js
module.exports = { entry: './main.js', output: { filename: 'bundle.js' } };

運行服務器，瀏覽http://127.0.0.1:8080

$ webpack-dev-server

Demo02:多個入口文件

容許多入口文件，它對於多頁面app是有用的

// main1.js
document.write('<h1>Hello World</h1>'); // main2.js document.write('<h2>Hello Webpack</h2>');

index.html

 
  <html>
  <body>  <script src="bundle1.js"></script>  <script src="bundle2.js"></script> </body> </html>

webpack.config.js

module.exports = { entry: { bundle1: './main1.js', bundle2: './main2.js' }, output: { filename: '[name].js' } };

Demo03:Babal-loader

加載器是一個能編譯你app資源文件的預加載器。例如：Babel-loader能編譯JSX/ES6文件爲JS文件。官方文檔有一個關於loaders的完整例子。

main.jsx

const React = require('react'); const ReactDOM = require('react-dom'); ReactDOM.render( <h1>Hello, world!</h1>, document.querySelector('#wrapper') );

index.html

<html>
  <body> <div id="wrapper"></div>  <script src="bundle.js"></script> </body> </html>

webpack.config.js

module.exports = { entry: './main.jsx', output: { filename: 'bundle.js' }, module: { loaders:[ { test: /\.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }, ] } };

在webpack.config.js中，module.loaders領域被用於設定加載器。上面的片斷用了babel-loader,它需求babel-preset-es2015和babel-preset-react插件來編譯ES6和React.你也能採用另一種方式設定babel查詢選項

module: {
  loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } } ] }

Demo04:CSS-loader

Webpack容許你在JS文件中require CSS , 而後用CSS加載器預加載CSS

main.js

require('./app.css');

app.css

body {
  background-color: blue; }

index.html

<html>
  <head>  <script type="text/javascript" src="bundle.js"></script> </head> <body> <h1>Hello World</h1> </body> </html>

webpack.config.js

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      { test: /\.css$/, loader: 'style-loader!css-loader' },
    ]
  }
};

此外：你必須用兩個加載器來編譯CSS文件。第一個是CSS-loader用來閱讀CSS文件，另外一個是Style-loader來插入Style標籤到HTML頁面中。不一樣的加載器靠感嘆號標記連接（！）

在運行服務器之後，index.html將有一個內聯樣式表

<head>
  <script type="text/javascript" src="bundle.js"></script>
  <style type="text/css">
    body {
      background-color: blue;
    }
  </style>
</head>

相關標籤/搜索

每日一句

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