webpack入门

来源：互联网发布：迪杰斯特拉算法动画编辑：程序博客网时间：2024/06/10 04:30

序言

>webpack推荐使用commonjs方式来加载模块,但是对AMD/CMD也有很好的兼容支持>commonjs和CMD是两个词

commonjs:

var a = require('./a');

amd:

define(['a','b'],function(a,b){        module.exports = ...;    });

官网

中文网址学习:
http://webpackdoc.com/start.html
http://www.w2bc.com/Article/50764
http://www.w2bc.com/article/101955

1 安装

npm i webpack -g

2 使用

2.1 打包一个简单的js文件    webpack a.js b.js bundle.js     把a.js和b.js打包成bundle.js2.2 简单的模块    module.exports

3 loader

本质是个node模块3.1 简写 !xxx-loader可以简写为!xxx3.2 安装loader3.3 --module-bind 'css=style!css'

4 配置文件(webpack.config.js)

为什么要使用配置文件,为了使用简单点

var webpack = require('webpack')    module.exports = {      entry: './entry.js',      output: {        path: __dirname,        filename: 'bundle.js'      },      module: {        loaders: [          {test: /\.css$/, loader: 'style!css'}        ]      }    }

5 插件,plugins

使用一个能写banner的东西

6 重要的–watch(-w)

监视文件的修改,及时的去编译文件

7 视频

视频

0 0