阮一峰之webpack-demos(译）
最近因开始学ReactJS,发现ReactJS跟webpack这个模块化打包工具绝配，又开始找webpack的资料学。。。。。。在本尊千辛万苦的看了众多资料下，还是感觉阮大神写的这个demo简单明了，深入浅出，很适合新手学习，但是因为资料是全英文写的，自己在学习的过程中就顺当翻译了下，以下为原文地址链接 ： https://github.com/ruanyf/webpack-demos#demo01-entry-file-source
怎样使用
首先，全局安装 webpack 和 webpack-dev-server
$ npm i -g webpack webpack-dev-server
其次，克隆该版本库并安装依赖
$ 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:8080
前言：Webpack是什么
Webpack是一个像Grunt和Gulp一样的前端构建系统
它类似Browserify，可被用作模块打包并且能够做的更多
$ browserify main.js > bundle.js
# be equivalent to
$ 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 ---------
进行一次开发模式编译 - 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>
