webpack 脚手架搭建

基础知识的扫盲普及

• 因为webpack 依赖于npm包，所以我们需要npm 进行初始化 因为我们要用 npm init进行初始化 初始化完成后 会自动生成一个
  package.json 的文件，我们以后所有的构建工具都会在里面看到

• 安装npm依赖包 npm install xxx@v.v.v
  *

• 卸载npm依赖包 npm uninstall xxx@v.v.v

• 安装时候的两个参数： -g (全局安装) --registry=https://registry.npm.taobao.org (引用国内淘宝原，加快下载速度)

webpack 知识笔记

• webpack的安装，需要安装本地的和全局的

  npm install webpack -g
  npm install webpack –save-dev （–save-dev：本地依赖安装的命令不会打包进业务代码 –save可以打包进业务代码例如 jquery）

• webpack核心文件 webpack.config.js

  entry:js的入口文件
  output：输出文件的路径
  externals:外部依赖的声明
  resolve:配置别名
  modules：各种文件，各种loader
  plugins：各种插件

• 前端需要的各种loade

  html loader:html-webpack-plugins
  js loader:babel-loader,bale-preset-es2015
  css loader:style-loader+css-loader
  字体和图片： url-loader

• webpack常用命令

webpack (本地测试)
webpack -p(打包线上线压缩)

• webpack-dev-server（前端开发服务器）

作用：可以在文件改变时，自动刷新浏览器

安装：npm install webpack-dev-server –save-dev && npm insatll webpack-dev-server -g (安装两个，因为我们也要在全局下使用)

配置：我们要在webpack.config.js里面配置一下 webpack-dev-server/client?http://localhost:8080

使用：当我们在全局使用的时候：webpack-dev-server –port 8080 –inline