webpack(1) - 初见

现在越来越多的JS代码被用在页面上 , 如何去很好地组织这些代码 , 成为了一个必须要解决的问题
不止有JS需要被模块化管理 , 前端当中很多的图片 css样式 , 都是需要被统一管理 , 方便进行扩展和维护的

所以webpack有如下几个目标 :

• 将依赖树拆分
• 保证初始加载的速度
• 所有静态资源可以被模块化
• 可以整合第三方的库和模块
• 可以构造大型项目

使用方法 :

安装

npm init - 生成一个package.json文件
npm install webpack --save-dev - 添加webpack依赖

这里可以对webpack执行全局安装 , 也可以只在当前项目当中进行安装
如果是按照上面的方式只在该项目中安装
可以在package.json当中配置脚本执行命令 , 用以执行webpack

  "scripts": {
    "build": "webpack --progress",
    "start": "webpack-dev-server --progress"
  },

webpack的配置

每个项目下都必须有一个webpack.config.js , 它就相当于webpack的一个配置文件 , 告诉webpack该做什么

这里先写一个最基本的可用配置
其实还有很多的配置项 , 具体可以查看官方文档

module.exports = {
    //页面入口文件配置
    //相当于执行这个JS文件可以直接或间接找到项目中用到的所有模块
    entry: {
        index : './src/entry.js'
    },
    //入口文件输出配置
    //最终要打包生成什么名字的文件, 放在哪里
    output: {
        path: __dirname,//表示当前目录
        filename: 'bundle.js'
    }
};

现在编写js文件
src/content.js

//这个文件相当于项目中所用到的一个模块
module.exports = "现在的内容来自于content.js文件";

src/entity.js

//这是我们定义的入口文件, 引用content模块
document.write(require("./content.js"));

编写完成之后 , 直接执行npm run build就可以执行webpack的打包操作

最后写一个html文件, 引入生成的bundle.js即可
( 后面会提到怎样去自动生成这个静态页面 )