webpack使用教程翻译自阮一峰(机翻)

最新推荐文章于 2023-07-23 00:46:46 发布

GarfieldEr007

最新推荐文章于 2023-07-23 00:46:46 发布

阅读量1k

点赞数

分类专栏：前端文章标签： webpack 教程

前端专栏收录该内容

23 篇文章 2 订阅

订阅专栏

原文https://github.com/ruanyf/webpack-demos#demo01-entry-file-source
这个仓库集合了一些webpack简单的demo。
这些demo风格简单明了，你将发现跟着这些案例学习webacpk这个强大的工具变得不费吹灰之力。

如何使用

首先，在全局环境中安装Webpack和webpack-dev-server

$ npm i -g webpack webpack-dev-server

然后将仓库克隆到本地并安装相关依赖

# Linux & Mac$ git clone git@github.com:ruanyf/webpack-demos.git
# Windows$ git clone https://github.com/ruanyf/webpack-demos.git
:
$ cd webpack-demos
$ npm install

现在，可以运行仓库中所有demo目录下的资源文件

$ cd demo01
$ webpack-dev-server

用你的浏览器访问 http://127.0.0.1:8080

前言：webpack是什么

webpack是一个前端构建系统类似于Grunt and Gulp.
它的功能有点类似于Browserify的模块包，但是它可以做的更多。

$ browserify main.js > bundle.js
# 等价于
$ webpack main.js bundle.js

它的配置文件是webpack.config.js

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

在有了webpack.config.js这个文件之后，你可以调用Webpack且不需要任何参数。

$ webpack

一些你应该知道的命令行选项

webpack– for building once for development(用于构建一个开发目录)
webpack -p– for building once for development(用于构建一个生产目录(压缩过的))
webpack --watch– for continuous incremental build(用于连续地构建)
webpack -d– to include source maps(展示映射关系)
webpack --colors– for making things pretty(用于美化展示的信息)

To produce a production ready application(为了产生生产准备的应用)，你可以在package.json编写以下scripts字段

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

Index

Entry file
Multiple entry files
Babel-loader
CSS-loader
Image loader
CSS Module
UglifyJs Plugin
HTML Webpack Plugin and Open Browser Webpack Plugin
Environment flags
Code splitting
Code splitting with bundle-loader
Common chunk
Vendor chunk
Exposing Global Variables
Hot Module Replacement
React router

Demo01:Entry file(入口文件) (资源)

Entry file(入口文件)将会被作为webpack读取并构造出bundle.js.
举例来说main.js就是一个(entry file)入口文件

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

index.html

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

webpack会根据webpack.config.js来构建出bundle.js

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

启动服务器，访问 http://127.0.0.1:8080 .

$ webpack-dev-server

坑1

$ webpack-dev-server

运行代码出现以下错误意义不明

 http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from C:\Users\umaru\demo\webpack-demos\demo01
Hash: 396f0bfb9d565b6f60f0
Version: webpack 1.14.0
Time: 44ms

ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./main.js in C:\Users\umaru\demo\webpack-demos\demo01
webpack: bundle is now VALID.
$ webpack-dev-server

$ webpack --display-error-details//带上参数可以找出详细的错误信息

Hash: 396f0bfb9d565b6f60f0
Version: webpack 1.14.0
Time: 31ms

ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./main.js in C:\Users\umaru\demo\webpack-demos\demo01
resolve directory
  C:\Users\umaru\demo\webpack-demos\demo01\main.js is not a directory (directory default file)
  C:\Users\umaru\demo\webpack-demos\demo01\main.js\package.json doesn't exist (directory description file)
resolve file
  C:\Users\umaru\demo\webpack-demos\demo01\main.js.webpack.js doesn't exist
  C:\Users\umaru\demo\webpack-demos\demo01\main.js.web.js doesn't exist
  C:\Users\umaru\demo\webpack-demos\demo01\main.js.js doesn't exist
  C:\Users\umaru\demo\webpack-demos\demo01\main.js.json doesn't exist
  resolve result C:\Users\umaru\demo\webpack-demos\demo01\main.js
  C:\Users\umaru\demo\webpack-demos\demo01\package.json (directory description file): SyntaxError: Unexpected token / in JSON at position 0

原因是json解析错误在第0行有注释json文件不认任何注释
修改package.json

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

再运行
$ webpack-dev-server

 http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from C:\Users\umaru\demo\webpack-demos\demo01
Hash: fc2be4484e3356d26c56
Version: webpack 1.14.0
Time: 74ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.43 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 40 bytes [rendered]
    [0] ./main.js 40 bytes {0} [built]
webpack: bundle is now VALID.

没有报错

Demo02: Multiple entry files (多入口文件)(资源)

多入口文件是合法的，它通常被应用于一个多页应用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: Babel-loader(编译器可以将es6语法转成低版本[如es5语法]提高兼容性) (资源)

loaders(加载器)是可以转换您的应用程序资源(更多信息)文件的一个预处理器，例如Babel-loader可以将JSX / ES6文件转换为JS文件。官方文档有一个完整的 loaders(加载器)列表

main.jsx是一个 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进行transpile(转义)。您也可以使用其他方式设置babel配置选项。

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

demo3 package.json

{
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  }
}

作者：菲龍探雲
链接：https://www.jianshu.com/p/cd123afa196a
來源：简书

GarfieldEr007

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack使用教程翻译自阮一峰(机翻)

原文https://github.com/ruanyf/webpack-demos#demo01-entry-file-source这个仓库集合了一些webpack简单的demo。这些demo风格简单明了，你将发现跟着这些案例学习webacpk这个强大的工具变得不费吹灰之力。如何使用首先，在全局环境中安装Webpack和webpack-dev-server$ npm i -g w...
复制链接

扫一扫