linux 网络配置 阮一峰,webpack使用教程 翻译自阮一峰(机翻)

原文https://github.com/ruanyf/webpack-demos#demo01-entry-file-source

这个仓库集合了一些webpack简单的demo。

这些demo风格简单明了，你将发现跟着这些案例学习webacpk这个强大的工具变得不费吹灰之力。

如何使用

$ 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

前言：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

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

Entry file(入口文件)将会被作为webpack读取并构造出bundle.js.

举例来说main.js就是一个(entry file)入口文件

// main.jsdocument.write('

Hello World

');

index.html

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

// webpack.config.js

module.exports = {

entry: './main.js',

output: {

filename: 'bundle.js'

}

};

$ 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('

Hello World

');

// main2.js

document.write('

Hello Webpack

');

index.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(

Hello, world!

,

document.querySelector('#wrapper')

);

index.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"

}

}