阮一峰之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>