webpack 学习1 安装构建项目

本文中使用的webpack版本是4+，请注意区分

node.js安装

node.js下载地址 选择较低版本的稳定版下载，下载完成后得到的是一个msi文件，点击安装即可

安装完毕以后新建一个文件夹，并在此文件夹下面按下shift+鼠标右键 在window10下这是在选中的目录下打开命令行窗口，也可以使用cmd进入目标文件夹，只要是在目标文件夹下开启命令窗口即可

初始化项目

npm init -y //init 表示初始化一个项目 -y表示构建的项目使用默认值 你可以分别 使用npm init 和npm init -y，就可以很清晰的观察它们之间的区别

敲完之后目录下就会出现两个文件

然后安装webpack 和webpack-cli

npm i webpack -d //安装webpack -d表示开发环境依赖 -s标识生产环境依赖 -g表示全局安装

npm i webpack-cli -d

为什么在本地安装而非安装至全局环境，那是因为在你使用html-webpack-plugin的时候会出现一个NodeTemplatePlugin问题，

这时候你需要把webpack连接到本地安装上（执行npm link webpack -s -d 连接到本地），所以我们就直接使用本地安装了。而你使用全局安装在执行这一步后，因为你所有的依赖是安装在全局的，所以会报一个

的错误（找不到模块的错误） 这时候，在执行npm i webpack -d 和npm i webpack-cli就可以解决了

我们在本目录下先建一个文件夹 src和一个配置webpack配置文件 webpack.config.js

webpack.config.js文件一定要和package.json文件同级，不然就得在package.json中指定配置文件地址，才能生效。至于如何指定，后面会有介绍，心急得同学可以去百度。

在webpack.config.js中添加如下配置内容 注意以下配置内容是为了更直观的描叙配置文件而是用的假数据，实际使用中并非如此

const path = require("path");//这个是node.js自带的路径模块 可以有效的防止不同机器上路劲出现差异问题

//第一种使用对象作为配置抛出
module.exports = {
    mode: 'development',//配置
    entry: {
        index: path.join(__dirname, 'src/index.js')
    },
    output: {
        filename: 'js/[name].js'
    }
}
// 第二种使用方法作为配置抛出  env 环境对象 argv 配置选项的映射对象
module.exports = function (env, argv) {
    console.log('env', env);
    console.log('argv', argv);
    return {
        mode: 'development',
        entry: {
            index: path.join(__dirname, 'src/index.js')
        },
        output: {
            filename: 'js/[name].js'
        }
    }
}

// //第三种方法 使用promise 这种方法与第二种方法没有太大的区别，唯一的不同就是异步加载配置文件完成之后才会进行打包 下面的代码产生结果就是延时五秒后开始进行打包
module.exports = () => {
    return new Promise((success, failed) => {
        setTimeout(() => {
            success({
                mode: 'development',
                entry: {
                    index: path.join(__dirname, 'src/index.js')
                },
                output: {
                    filename: 'js/[name].js'
                }
            })
        }, 5000)
    })
}

//第四种 导出多个配置对象 也可以使用方法抛出 方法返回值是一个数组就行了 所有的配置对象都会构建。例如，导出多个配置对象，对于针对多个构建目标（例如 AMD 和 CommonJS）打包一个 library 非常有用。
module.exports = [
    {
        mode: 'development',//配置
        entry: {
            index: path.join(__dirname, 'src/index.js')
        },
        output: {
            filename: 'js/[name].js'
        }
    },
    {
        mode: 'production',//配置
        entry: {
            index: path.join(__dirname, 'src/index.js')
        },
        output: {
            filename: 'production/[hash].js'
        }
    },
]

好了webpack的安装构建项目大致上就是如此，下一章记录webpack的起点和输入的配置