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的起点和输入的配置