webpack笔记（一）

webpack是一个 模块 打包 的工具（是一个用JavaScript的静态）

需要先安装node.js node.js自带了软件包管理工具npm

全局安装webpack npm install webpack@3.6.0 -g

在项目工程文件下面建立一个webpack的配置（用于自动导出）

webpack.config.js代码如下：

const path = require('path')  //依赖
module.exports = {
    entry: './src/index.js',  //入口
    output:{               //出口
        path:path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {        //引入模块
        rules: [
          {
            test: /\.css$/,
            //css-loader值负责css的加载
            //style-loader负责将样式添加到dom中
            //使用多个loader时，是从右向左读
            use: [
                { loader: "style-loader" },
                { loader: "css-loader" }
              ]
          }
        ]
      }
}

之后建立package.json文件 npm init

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",           //开源需要
  "dependencies": {          //局部webpack
    "webpack": "^3.6.0"
  },
  "devDependencies": {
    "css-loader": "^3.6.0",
    "style-loader": "^1.2.1"
  }
}

使用 npm install 安装依赖包

为了同意简化webapck可以在package.json当中的"script" 下写你需要的脚本

局部配置webpack版本 npm install webpack@3.6.0 --save -dev

这样我们的webpack基本配置就弄好啦

就可以愉快的模块化开发啦（当然不行）