原文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"
}
}
