windows 下安装webpack

1. 去nodejs的官网下载 nodejs  并安装

2. 安装好nodejs后，则 npm 也会被自动的安装

           安装好后可以使用命令    node -v    和  npm -v来看看是否正确 的安装

3. 全局安装 webpack  

           命令行 ：  npm install webpack -g  // 后面这个 -g表示全局的安装    就像windows的 环境变量一样，任何目录下都可以使用

4. webpack 4  需要安装       webpack-cli 

           所以全局安装     webpack-cli              （一定要全局安装，如果用 - D 的安装会报错）

           命令行:  npm install webpack-cli -g

            说明：

npm install module_name -S    即    npm install module_name --save    写入dependencies

npm install module_name -D    即    npm install module_name --save-dev 写入devDependencies

npm install module_name -g 全局安装(命令行使用)

npm install module_name 本地安装(将安装包放在 ./node_modules 下)

dependencies与devDependencies有什么区别呢？

devDependencies 里面的插件只用于开发环境，不用于生产环境

dependencies 是需要发布到生产环境的

webpack 的核心概念   entry (打包入口)   output(输出文件)   loaders(加载其它处理器)  plugins(插件)

          1） entry 的格式   (entry可以有三种格式，并且可以用于单入口和 多入口)

                 格式a:   

module.exports = {
    entry:"app.js"     //表示是一个单入口 入口文件名是 app.js
}

               格式b:

module.exports = {
    entry:["app.js","index.js"]    //表示是一个多入口项目   入口文件分别是 app.js 和index.js
}

             格式c:

module.exports = {
    entry:{
        app : "app.js",
        index : "index.js"
    }
}
//表示一个多入口的项目 入口文件分别是app.js 和 index.js  
//这种方式的好处是 可以自定义一个 入口文件的  键名

一般推荐使用  格式 C;

2.  output   表示打包文件的输出

格式如下

module.exports = {
    entry:"app.js",
    output:{
        filename:"bundle.js"
    }
}
//表示打包app.js 后，将其输出为文件 bundle.js

当入口是多个文件的时候，可以使用占位符来定义输出的文件

module.exports = {
    entry:{
        app:"app.js",
        index:"index.js"
    },
    output:{
        filename:"[name].bundle.[hash:5].js"
    }
}

//这里的 [name] 和 [hash:5] 就是占位符，可以根据 entry 中的文件名来 自动替换 [name]的值

3. loader  webpack 默认是可以打包js代码的 ，当有css 等其它的文件也需要打包进去的时候，就要使用loaders了

添加loader的格式如下：

module.exports = {
    entry:{
        app:"app.js"
    },
    output:{
        filename:"bundle.js"
    },
    
    module:{
        rules:[
            {
                test:'/\.css$/',        //表示匹配后缀名是 .css的文件
                use : 'css-loader'      //使用 css-loader 来进行编译
            }
        ]
    }

}

常用的loader 有 ： babeld-loader  (可以将 ES6的语法转换为 ES5的语法)

                               style-loader css-loader (css相关的)

                               file-loader url-loader (与文件和路径相关的)

4. plugins  (可以全程参与打包的插件)

作用，可以设置变量，等等很多，用法很灵活，不多说

如： html-webpack-plugin  插件的基本作用就是生成html文件