webpack-01-基本配置

nrm ls

1
2
3
4
5
6
7

	npm -------- https://registry.npmjs.org/
  yarn ------- https://registry.yarnpkg.com/
  cnpm ------- http://r.cnpmjs.org/
* taobao ----- https://registry.npm.taobao.org/
  nj --------- https://registry.nodejitsu.com/
  npmMirror -- https://skimdb.npmjs.com/registry/
  edunpm ----- http://registry.enpmjs.org/

nrm use npm

更改下载的镜像

1
2
3
4
5
6
7

* npm -------- https://registry.npmjs.org/
  yarn ------- https://registry.yarnpkg.com/
  cnpm ------- http://r.cnpmjs.org/
  taobao ----- https://registry.npm.taobao.org/
  nj --------- https://registry.nodejitsu.com/
  npmMirror -- https://skimdb.npmjs.com/registry/
  edunpm ----- http://registry.enpmjs.org/

webpack可以做什么

• 处理js文件的相互依赖关系
• 处理浏览器的兼容问题，把高级的、浏览器不兼容的转为低级的

webpack基本使用

• 安装webpack在全局，就可以在全局使用webpack命令。注意版本别太高

1

npm i webpack@3 -g

• 在项目根目录中运行

1

npm i webpack --save-dev

• 安装到项目依赖中

使用webpack打包构建列表隔行变色案例

1. 运行npm init -y初始化项目

2. 创建项目基本结构目录

3. 安装jQuery库 npm i jquery@1 -S

4. 创建mian.js写代码逻辑

   1 2 3 4 5 6 7

   //导入jQuery import $ from 'jquery' //注意千万别像我似的把属性名写错了找半天找不出来 $(function () { $('li:even').css('background-color', 'red') $('li:odd').css('background-color', 'green') })

5. 在页面中直接引入main.js会报错，因为浏览器不认识import这种高级语法

6. 用webpack对main.js进行打包

   1	webpack ./src/js/main.js ./dist/bundle.js

7. 然后把页面中引入mian.js变成引入bundle.js

使用webpack的配置文件简化打包时候的操作

1. 在项目根目录中创建webpack.config.js

2. 由于运行webpack时需要入口和出口两个文件，所以需要配置

   1 2 3 4 5 6 7 8 9 10

   //引入路径模块 const path = require('path') //导出配置对象 module.exports = { entry: path.join(__dirname, './src/js/main.js'), output: { path: path.join(__dirname, './dist'),//输出的文件目录 filename: 'bundle.js' //输出的文件名 } }

3. 这样就可以直接使用webpack（不用加参数）命令进行打包了