webpack2.0 基本使用

Posted 2020-09-03

1, 新建文件夹webpack， npm init –y 快速创建一个package.json 文件。新建src和build 文件夹，分别存放源代码和打包后的代码。 

2， 安装webpack。 webpack 的安装方式有两种：全局安装 和 本地安装。

　　全局安装： npm install webpack –g, 之后就可以在命令行中使用webpack 命令，如果我们想打包src里面的文件，就可以在命令行中直接输入 webpack src/index.js  build/index.js 进行打包。但这里有一个版本管理问题， 如果我们的项目中，有一个是用webpack 1.0版本，有的是用webpack2.0 版本，全局webpack 命令就无能为力了。

　　本地安装：npm install webpack --save-dev , 但这样我们无法在命令行中使用webpack 命令了，这时用到了npm script 命令。打开package.json 文件，找到scripts 字段，写入 “start”: “webpack src/index.js  build/index.js”,  这样在命令行中输入npm run start 也可以启用webpack 进行打包。

　　If you are using npm scripts in your project, npm will try to look for webpack installation in your local modules for which this installation technique is useful. 当我们使用npm scripts 时，npm 会寻找本地安装的webpack ,这就解决版本问题， 每一个项目下都使用本地安装webpack , 互不影响。所以推荐本地安装

3，webpack 配置文件（webpack.config.js）的核心概念

　　安装完webpack ,我们也进行了简单的打包操作，这其实是webpack 作为打包工具的基础。如果我们的js 代码都是es6 写的，想把它转换成es5. 这种简单的打包命令就无能为力了。这就需要使用webpack的配置文件 webpack.config.js. 配置文件有四个核心概念：

　　entry 入口文件：webpack以哪个文件作为项目的入口， 就是webpack 打包的时候的从哪个文件开始。

　　output: webpack 打包完成后的文件放到什么地方。

　　loader 模块加载器：指定用哪个模块对文件进行解析。比如，我们把es6 的语法，转换成es5 的语法，我们就要指定 babel loader 对js 文件进行解析。

 　  plugins 插件：完在一些特别的功能。 比如 js，css文件的压缩。

　　上面简单的 webpack src/index.js  build/index.js 命令可以用webpack.config.js 来写，这时npm scripts 命令 改成 "start": "webpack".  

module.exports = {
    entry: "./src/index.js",
    output: {
        path:"./build",
        filename: "index.js"
    }
}

　　有时还会看到 “webpack --config mywebpack.config.js”。 --config 参数 主要配置我们要使用的配置文件。 当我们使用webpack 命令时，我们在命令行中输入webpack ,就可以进行打包。这是因为，当使用webpack 命令时，它会自动寻找我们这个项目中的webpack.config.js 文件，如果我们项目中有一个配置文件，这没有问题，但是如果我们文件中有许多配置文件，它只会打包它最先找到的一个，这就不是我们想要的了，所有我们要进行配置 使用到了—config 参数。

如果我们只用一个webpack.config.js 文件， scripts 里面可以直接写 “start”: “webpack”如果有多个文件，就要指定我们想要使用哪个配置文件进行打包。 webpack --config mywebpack.config.js

4， 使用webpack 配置文件

　　webpack 把所有的资源都当做模块，对模块的解析都要用到loader(模块加载器)。 现在的src index.js 中写es6 语法，让webpack 转化成es5 的语法，体验一下loader 的使用。es6+ 转化成es5 要用到babel loader。

　　npm install babel-loader babel-core babel-preset-es2015 --save-dev 安装babel-loader