webpack简易入门

webpack简易学习教程

1.为什么要用webpack？

• 模块化开发

• 代码压缩，合并，提取公共代码，

• 编译ES6,CoffeeScript；

• Scss，Less等css预处理器

2.webpack简易入门

• 安装
  npm isntall webpack -g

• 配置webpack.config.js ，

  let path = require('path');
  let webpack =require('webpack')
  module.exports = {
    entry: path.resolve(__dirname, 'app/index.js'),
    //入口文件，需要编译的文件
    output: { //出口文件
        filename: 'bundle.js',//编译后文件名  
        path: path.resolve(__dirname, 'build'),//存储地址
        publicPath:'/assets/' //资源文件的指定目录
    },
    devServer:{ //热更新
        inline:true, //inline热更新模式
        port:9000, //自动启动端口
    },
  }

• 配置package.json：运行npm run build 启动编译模式和npm run start热更新模式。

  "scripts": {
    "build": "webpack", 
    "start": "webpack-dev-server --open " //open自动打开视窗
  },

ps

• path.join([path1]，[path2]) 用于连接路径；

• path.resolve([from……],to) 将to参数解析成绝对路径

• path.dirname(p) 返回路径中代表文件夹的部分