webpack学习笔记2 起步
gezilan 2019-06-21
webpack学习笔记2 起步
上一节介绍了webpack的一些概念，这篇文章将会开始学习。从安装开始，以及为什么需要webpack配置文件。
基本安装webpack
mkdir webpack-demo && cd webpack-demo npm init npm install --save-dev webpack
现在webpack已经出到webpack3了。
在跟目录下新建一个index.html文件和一个src文件夹，src文件夹里有一个index.js文件。
./src/index.js
function createComponent(){
var element = document.createElement('div');
//下边的方法是一个库Lodash的方法，这个库在index.html中引入
element.innerHTML = _.join(['hello webpack'],'');
return element;
}
document.body.appendChild(createComponent());index.html
<html>
<head>
<title>Getting Started</title>
<script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>理论上说，这种方法实现一般的需求是可以的，但是也会有一些问题。
比如，这个文件会依赖第三方的库，如果，第三方库没有加载进来或者加载错误，那么页面也将会报错，当没有用到第三方库的时候，浏览器也会下载无用的代码
创建bundle文件
首先，在根目录下新建一个dist文件夹用于存放输出之后的代码。并且在dist文件夹下新建一个index.html文件。
同时，我们还要安装lodash这个依赖。
npm install --save-dev lodash
修改之后的index.js
import _ from 'lodash';
function createComponent(){
var element = document.createElement('div');
element.innerHTML = _.join(['hello webpack2'],'');
return element;
}
document.body.appendChild(createComponent());对应的index.html也有一些修改
<html>
<head>
<title>Getting Started</title>
//<script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
//<script src="./src/index.js"></script>
<script src="./dist/bundle.js"></script>
</body>
</html>这么做，我们显示的引进lodash库，并且赋值给‘_’这个变量，通过声明所需要的依赖，webpack通过依赖图加载相关的依赖，然后根据加载顺序，生成一个bundle文件。
接下来执行webpack的操作即可
./node_modules/.bin/webpack src/index.js dist/bundle.js
我们在浏览器里打开html能够看到正确的输出。
使用webpack配置文件
大多数的项目很复杂，要依赖太多的东西，所以这也就是webpack配置文件存在的意义，之前的一篇已经详细介绍了webpack的配置文件写法。有了webpack的配置文件，可以避免在终端中用node输入多的东西。
根目录下创建一个webpack.config.js
var path = require('path');
module.exports = {
entry:'./src/index.js',
output:{
filename:bundle.js,
path:path.resolve(__dirname,'dist')
}
}然后在终端执行：
./node_modules/.bin/webpack --config webpack.config.js
这种方式更加灵活，我们以后还可以在配置文件中配置loader，plugin等。这种方式极大地简化了开发效率。
引入npm脚本
我们可以在package.json里边添加一个脚本，类似于一个快捷方式启动webpack。
{
...
"script":{
"build":"webpack"
}
...
}这下我们在终端直接执行 npm run build 即可
下一节会展示说明webpack是如何管理资源的。
