webpack 入门(一):webpack安装和基础项目配置

2018-09-21 本文已影响0人前端小木鱼

一、webpack简介

1. webpack是什么：

webpack是一个打包工具：本质上webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。
当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

2. webpack的作用：

(1)打包：把多个文件打包成一个js文件，以减少服务器压力和贷款。
(2)转化：使用loader转化lees、sass、ts等。
(3)优化：SPA项目越来越盛行，前端项目复杂度高，webpack可以对项目进行优化。

3. webpack构成：

(1)入口：entry
(2)出口：output
(3)loader：转化器
(4)plugins：插件
(5)devServer：开发服务器
(6)mode

4. webpack的两种环境

(1)开发环境(development)：就是你平常写代码的环境。
(2)生产环境(production)：项目开发完毕，部署上线。

二、webpack安装和基础项目配置

1.创建项目文件夹（webpack-demo），并建立基础的目录和结构

pwebpack
  dist                          //静态文件存放的文件夹(distribution)
    index.html                 //最终要浏览的html文件
  src                            //js代码等存放的文件夹(source)
    index.js                  //js代码主文件
  webpack.config.js         //webpack配置文件

编写index.html和index.js文件

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello webpack</title>
</head>
<body>
    <script src="./bundle.js"></script>    //bundle.js文件我们后面会通过打包创建
</body>
</html>

//index.js
document.write('hello webpack i am  so happy!);

编写webpack.config.js文件

//webpack.config.js
const path = require('path');      //引入path，以处理路径问题
console.log(path.resolve(__dirname,'src/index.js'));   //打印路径，以排查错误（非必要代码）
module.exports = {
    //入口配置
    entry: {
        main: path.resolve(__dirname,'src/index.js'),
    },
    //出口配置
    output: {
        path: path.resolve(__dirname,'dist'),         //此处若非绝对路径，可能报错
        filename: 'bundle.js',
    },
    //以下可按需配置
    //module rules loaders
    module: {},
    //插件
    plugins: [],
    //开发服务器
    devServer: {},
};

命令行进入项目并全局安装webpack（必须已安装node）

...\webpack>cnpm install webpack-cli -g         //参数-g为全局安装`

项目初始化(即自动建立项目依赖配置文件：package.json)

...\webpack>cnpm init -y               //参数-y可以跳过初始化中的配置询问。

命令行安装项目本地依赖webpack、webpack-lic（必须已安装node）

...\webpack>cnpm i webpack webpack-cli -D    //参数-D为--save-dev简写`

*注意：此命令会自动生成node_modules文件夹存放项目本地依赖，同时原有package.json文件中会新增"devDependencies"对象用于记录本地安装的依赖，当项目本地依赖被删除时，运行cnpm install -D即可根据package.json中的记录自动安装项目本地依赖，这非常重要！

打包文件，生成出口文件bundle.js

...\webpack>webpack --mode development    //--mode devlopment设置为开发模式，否则会有设置模式的警告

在浏览器中打开index.html即可浏览，至此简单的webpack打包就成功了。

三、其它事项

遇到的问题：
！！！注意如果修改了package.json打包可能会报错：
ERROR in Entry module not found: SyntaxError: E:\webpack-demo\package.json (directory description file)
将package.json删除，重新初始化文件，这时再重新打包则成功了。
通过配置package.json中的 "scripts"，可以新增命令。
在package.json文件的"scripts"中新增build：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js --mode development"       
  },

保存后，直接运行...\webpack>cnpm run build即可打包。
！！！注意如果新增build时缺少--config webpack.config.js部分则可能报错。

webpack.config.js为webpack配置文件的默认名称，不建议修改，但是可以修改。
如果将webpack配置文件名称修改为haha.config.js，则打包时需运行
...\webpack>webpack --config haha.config.js