webpack基本使用

最近在整理webpack相关东西，主要参考官方文档

基本介绍：

webpack版本：v3（近期推出来v4版本，新增了很多新内容，可异步官方文档参考）

官方文档（中文）地址：https://doc.webpack-china.org/

这里命令行工具使用的是cmder（http://cmder.net/ Windows用户可以考虑使用这个，毕竟写代码时命令行的颜值也挺重要）

在文件夹创建一个空文件夹存放webpack demo，例如webpack-demo。

mkdir react-demo && cd react-demo

1. 基本安装

第一条命令进行初始化，生成package.json文件；第二条命令安装webpack，生成node_modules文件，包含所有的依赖包

npm init -y
npm install --save-dev webpack  

这时应该能看到webpack-demo目录下有两个东西生成

现在我们将创建以下目录结构和内容：

  webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

往src/index.js里加点东西

function component() {
  var element = document.createElement('div');
  element.innerHTML = "hello world again!!";
  element.style.fontSize = '50px';
return element; } document.body.appendChild(component());

index.html

在此示例中，

经过webpack打包后形成bundle的形式，这时会发现dist文件夹下出现了bundle.js文件。这个文件将一些功能封装成function供前端来调用。

3. 使用一个配置文件

大多数项目会需要很复杂的设置，这就是为什么 webpack 要支持配置文件。

在webpack-demo中创建一个webpack.config.js文件

webpack.config.js：

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

再次运行 webpack 打包项目

4. 在浏览器中打开index.html，如果成功应该能看到一下结果：

   
   
   

5. 总结：
   其实总体看下来webpack的配置还是挺麻烦的，但是新学一个东西总是要从头开始做起才能比较好的了解它的原理，用熟练了以后可以使用许多更为方便的工具。如果是做react+webpack开发，可以使用官方推出的create-react-app工具，简化了很多配置工作，提高了开发效率。