webpack的配置

一、入口和出口的配置

1.在项目的根目录下新建一个webpack.config.js（用来存放一些有关webpack的一些配置）文件

2.项目当中如果用到node相关的东西的话，需要进行初始化npm init(-y),之后会生成package.json 文件

3.过commonJS的方式导出一个对象

const path = require("path");

module.exports = {
    entry: "./src/main.js",//入口
    output: {//出口
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    }
}

4.在终端直接执行webpack即可

二、webpack局部安装

1.安装本地webpack
cnpm install webpack@3.6.0 –save-dev(运行时依赖)

2.npm映射
在初始化之后（npm init）打开package.json，找到scripts字段，在该对象里加入属性：”要替代的指令”，执行指令则执行npm run 属性
例如： webpack被替代为build。替代后的执行指令为npm run build

{
    "name": "exit",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
    },
    "author": "",
    "license": "ISC"
}

写完该脚本之后，在执行指令时优先寻找本地的webpack

3.在终端里（cmd/编译器自带的终端等）敲的命令都是全局的，若果想用本地的，必须要找到本地的webpack文件，但是npm映射之后就不用了，这也是npm映射的好处之一

三、webpack中使用css文件的配置

使用loader过程：
1.通过npm安装需要的loader

npm install --save-dev style-loader

npm install --save-dev css-loader

（如果觉得npm太慢，可以使用淘宝镜像cnpm）

建立自己的css文件，例如我建立的是normal.css

2.在入口文件加入：

import "./css/normal.css";

3.在webpack.config.js的modules关键字下进行配置
（大部分的loader都可以在webpack的官网中找到，并且学习对应的用法）

const path = require("path");

module.exports = {
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    },
    module: {
        rules: [{
            test: /\.css$/,
            // css-loader值负责将css文件进行加载
            // style-loader负责将样式添加到DOM中
            use: ['style-loader', 'css-loader'],
        }, ],
    }
}

注意：使用多个loader时，是从右往左读的
3.执行 npm run build，在index.html中引用如下：