1.nmp install webpack -g
安装全局的webpack, -g即指全局安装,如出现权限错误则需要在命令前加上sudo
2.npm install webpack@1.15.0 --save-dev
在项目中安装webpack
3.webpack -v 查看版本号
两种方式配置webpack
1.1 在项目的page文件夹下建立index文件夹,在index文件夹下建立index.js和cats.js文件
1.2 index.js文件中配置以下信息,然后保存
cats = require('./cats.js'); console.log(cats);
1.3 在cats文件中配置以下信息,然后保存
var cats = ['dave', 'henry', 'martha']; module.exports = cats;
1.4 在项目文件夹下运行命令
webpack ./src/page/index/index.js ./dist/app.js
2.1.在项目文件夹下建立webpack.config.js文件,在文件中建立以下信息
module.exports = { entry: './src/page/index/index.js', output: { path: './dist', filename: 'app.js' } };
注:entry:js的入口文件
output:目标文件
externals:外部依赖的声明
resove:配置别名
module:各种文件,各种loader
plugins:插件
2.2.在项目文件夹下打开gitbash执行‘webpack’命令
问题:
1.为什么全局安装时不需要版本号,而在安装项目依赖时需要版本号
这和npm的加载原理相关,npm会优先使用项目本地的npm包,如果找不到才去全局的npm包里找,在全局安装中只是为了提供命令,而真正使用的是webpack@1.15.0的版本
2.为什么用webpack@1.15.0版本
因为2.x版本在正常浏览器中没有问题,但在IE8中会有问题,并且问题很难找出,和保留字有关,IE8惹不起还是躲一躲较好
3.什么是 --save-dev,为什么本地项目安装的时候要加 --save-dev
这是npm的另一个机制,他会把包的信息存放在package.json文件中,这样就可以记录项目的依赖