Webpack
Webpack是什么？
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
为什么要使用webpack？
今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法
a:模块化，让我们可以把复杂的程序细化为小的文件;
b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；
c:scss，less等CSS预处理器
.........
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的，这就为WebPack类的工具的出现提供了需求。
怎么样使用呢？
首先我们要在全局环境下安装webpack及webpack-dev-server
npm install -g webpack webpack-dev-server
详细的安装及过程我就不贴出来了，https://segmentfault.com/a/1190000006178770这里有篇入门的教程。
我们直接看一下demo：
Entry file(入口文件)将会被作为webpack读取并构造出bundle.js.
举例来说main.js就是一个(entry file)入口文件
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'
}
};
多入口文件是合法的，它通常被应用于一个多页应用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'
}
};
Babel-loader(编译器可以将es6语法转成低版本[如es5语法]提高兼容性)
loaders(加载器)是可以转换您的应用程序资源(更多信息)文件的一个预处理器，例如Babel-loader可以将JSX / ES6文件转换为JS文件。官方文档有一个完整的 loaders(加载器)列表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']
}
}
]
}
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"
}
}
webpack可以在JS中引入css文件。例如：
main.js中：
require('./app.css');
index.html
<html>
<head>
<script type="text/javascript" src="bundle.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
module: {
loaders:[
{ test: /\.css$/, loader: 'style-loader!css-loader' },
]
}
};
注意，必须使用两个加载器来转换CSS文件。首先是CSS加载器读取CSS文件，另一种是样式装入器将样式标签插入HTML页面。不同的加载器通过感叹号（！）链接在一起。
上一篇： webpack的基本使用