安装
1.预 -必需品:https://webpack.js.org/get-started/install-webpack/#pre-requisites
在开始之前,确保你有一个新版本的Node.js安装。 目前这是一个理想的出发点。你会遇到各种与旧版本的问题他们可能会丢失或相关功能WebPACK包可能需要。
2.全局安装
npm install webpack -g
The webpack command is now available globally.
该webpack命令现在可以在全局范围内
然而,这不是一个推荐的做法。这会导致你卡在特殊的版本并且使用不同版本的时候导致项目失败。下一节告诉你如何安装当地WebPACK项目中。
3.本地安装
npm install webpack –save-dev
npm install webpack@< version> –save-dev
如果你在你的项目中使用了npm的脚本,NPM 将尽力寻找WebPACK安装在您的本地模块的安装技术是有用的。
“scripts”: {
“start”: “webpack –config mywebpack.config.js”
}
这是标准和推荐的做法。
运行WebPACK本地安装你可以访问其本版
node_modules/.bin/webpack
4.最前沿
如果你对使用最新的,有热情WebPACK(注意-可能是不稳定的),你可以直接安装于WebPACK库使用
npm install webpack/webpack#
Introduction
1.入门
WebPACK是一个工具,在你的应用程序构建JavaScript模块。开始使用从CLI或API WebPACK,按照安装说明。简化你的工作流程WebPACK快速构建一个应用程序依赖图和捆绑他们在正确的顺序。WebPACK可以配置定制优化你的代码,将供应商、CSS、JS代码运行生产,开发服务器热加载你的代码不刷新页面和许多很酷的功能。了解更多关于为什么你应该使用WebPACK。
2.创建一个包(bundle)
创建一个demo目录试用webpack。安装WebPACK。
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install –save-dev
webpack webpack –help # Shows a list of valid cli commands
npm install –save lodash
Now create an index.js file.
app/index.js
function component () {
var element = document.createElement('div');
/* lodash is required for the next line to work
lodash是线下工作的要求 */
element.innerHTML = _.map(['Hello','webpack'], function(item){
return item + ' ';
});
return element;
}
document.body.appendChild(component());
运行这段代码,通常有以下HTML
index.html
<html>
<head>
<title>Webpack demo</title>
<script src="https://unpkg.com/lodash@4.16.6" type="text/javascript"></script>
</head>
<body>
<script src="app/index.js" type="text/javascript"></script>
</body>
</html>
在这个示例中,脚本标签之间有隐式的依赖关系。
index.js取决于lodash被包括在页面运行前。这是因为index.js隐从未需要lodash;它只是假设存在一个全局变量_。
* 这种JavaScript项目管理的问题:*
- 如果一个依赖项丢失,或包含在错误的顺序中,应用程序将不起作用。
如果一个依赖是包含,但不使用,那么浏览器必须下载很多不必要的代码。
到lodash( 工具库)依赖与index.js 捆绑,我们需要进口lodash。
app/index.js
+ import _ from 'lodash';
function component () {
...
我们也将需要改变index.html 要求捆绑的js文件。
<html>
<head>
<title>Webpack demo</title>
- <script src="https://unpkg.com/lodash@4.16.6" type="text/javascript"></script>
- <script src="app/index.js" type="text/javascript"></script>
</head>
<body>
+ <script src="dist/bundle.js" type="text/javascript"></script>
</body>
</html>
在这里,index.js 明确要求lodash到场,并把它作为_(没有全局范围的污染)。
通过声明一个模块需要的依赖关系, WebPACK可以利用这些信息来建立一个依赖图。然后,它使用图来生成一个优化的包,脚本将以正确的顺序执行。也未使用的依赖项将不被包含在包中。
现在运行在这个文件夹WebPACK加入文件被index.js和输出bundle.js文件捆绑了所有的页面所需的代码。
webpack app/index.js dist/bundle.js
Hash: a3c861a7d42fc8944524 Version: webpack 2.2.0 Time: 90ms Asset
Size Chunks Chunk Names index.js 1.56 kB 0
[emitted] main [0] ./app/index.js 170 bytes {0} [built]
3.Using webpack with a config
对于更复杂的配置,我们可以使用一个配置文件,您的代码可以参考束WebPACK。上述命令将表示在配置如下—
webpack.config.js
module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: './dist'
}
}
This file can be run by webpack as
webpack --config webpack.config.js
Hash: a3c861a7d42fc8944524
Version: webpack 2.2.0
Time: 90ms
Asset Size Chunks Chunk Names
index.js 1.56 kB 0 [emitted] main
[0] ./app/index.js 170 bytes {0} [built]
如果一个webpack.config.js现在 它的默认webpack命令位。
配置文件允许使用WebPACK的所有灵活性。我们可以添加装载程序规则,插件,解决选项和许多其他增强功能,我们的捆绑使用这个配置文件。
Using webpack with npm
考虑到从CLI这样跑WebPACK不是特别有趣的,我们可以设置一个小捷径。这样的调整package.json:
{
...
"scripts": {
"build": "webpack"
},
...
}
你现在可以达到同样采用NPM运行编译命令。NPM拿起脚本,通过它和补丁暂时环境,包含本命令。你会看到这个公约在很多项目在那里。
你可以通过自定义参数,通过增加两个破折号WebPACK NPM运行编译命令,例如新公共管理的构建–颜色。
conclusion n. 结论; 结局; 断定,决定; 推论
conclusions n. 结论; 结束( conclusion的名词复数 ); 推
结论
现在你已经基本建立起来,你要挖掘的基本概念和配置WebPACK更好地了解它的设计。也检查指南,以了解如何处理常见的问题。该接口挖掘到较低的水平。