webpack详细教程

一、前端自动化构建工具是什么/有什么用

https://www.jianshu.com/p/e290f9f53b7e
https://blog.csdn.net/wind_ghoul/article/details/79099322
https://www.imooc.com/article/66984
https://www.jianshu.com/p/b85c52360b83

二、webpack3安装教程

参考链接（版本过老，有许多需要改进的地方）：https://www.jianshu.com/p/42e11515c10f

新建项目文件夹，例如D:\work\webpack_test

先确保安装好了npm 和 node ，然后用管理员权限运行CMD，进入项目文件夹目录，

输入命令全局安装webpack（把-g改成--save可以局部安装，慢的话可以用cnpm：https://www.cnblogs.com/wenjunwei/p/10078460.html）

npm install webpack@4 -g

npm install webpack-cli -g

windows可能会出现fsevents@^1.2.7报错，但是可忽略：https://blog.csdn.net/Fabulous1111/article/details/79388841

然后建立package.json，一直回车默认就可以了

npm init

然后建立如下的目录结构，

image

其中app放项目源码，node_modules放用到的工具包之类的（全局安装的webpack暂时还没有这个文件夹，等打包过后就会自动生成了），public放页面文件以及到时候打包好的JS文件，其中node_modules和package是自动生成的，其他的文件代码如下

// Greeter.js

module.exports = function() {

  var greet = document.createElement('div');

  greet.textContent = "Hi there and greetings!";

  return greet;

};

//main.js

const greeter = require('./Greeter.js');

document.querySelector("#root").appendChild(greeter());

可见有两个JS文件，然后index.html只引用了bundle.js一个JS文件，所以我们就是要把前两个JS文件打包成一个JS文件（起减少请求、优化性能、提高速度的作用，文件量大的时候尤其如此）

使用webpack指令就可以完成打包

全局安装了的话，在项目文件夹直接使用：

webpack app\main.js -o public\bundle.js

局部安装的话要做该文件夹使用：

node_modules\.bin\webpack app\main.js -o public\bundle.js

打包成功，没有报错，index.html打开也正常。那么基本上说明安装成功了。

【可能遇到的问题：

---windows下的文件路径记得是用反斜杠 \

---如果打包成功，index.html浏览器显示失败，可以打开浏览器的console看看是不是权限不足，例如index.html在C盘的情况下

---想用回低版本

版本兼容性：https://blog.csdn.net/qq_27300101/article/details/80932670

低版本安装教程：https://blog.csdn.net/wanxue0804/article/details/79427332

---WARNING:The 'mode' option has not been set：https://www.jianshu.com/p/d71b27d0dfb5

---package.json文件：https://www.jianshu.com/p/b3d86ddfd555

】

三、使用教程

入门教程（有点过时了，要结合评论一起看）：https://www.jianshu.com/p/42e11515c10f

官方文档：https://webpack.docschina.org/concepts/

1.命令简化

根目录新建webpack.config.js

module.exports = {

  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件

  output: {

    path: __dirname + "/public",//打包后的文件存放的地方

    filename: "bundle.js"//打包后输出文件的文件名

  }

}

有了这个配置之后，再打包文件，只需在终端里运行webpack(非全局安装需使用node_modules/.bin/webpack)命令就可以了，这条命令会自动引用webpack.config.js文件中的配置选项

还有一种常用的方法：修改根目录package.json，主要是在"scripts"中加入指令名字，

（npm的start命令是一个特殊的脚本名称，其特殊性表现在，在命令行中使用npm start就可以执行其对于的命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name}如npm run build）

修改后类似于

{

  "name": "webpack_1",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "start": "webpack"

  },

  "author": "",

  "license": "ISC"

}

然后使用命令 npm start 同样也可以执行打包操作了

2.使用webpack构建本地服务器

https://www.cnblogs.com/xuehaoyue/p/6410095.html

3.Loaders能调用外部的脚本或工具，实现对不同格式的文件的处理

3.1 babel编译器

babel可以帮助你编译ES6、ES7、React框架的JSX等浏览器不完全支持的语法，转化为浏览器可以执行的JS，用了babel就可以在开发中使用更加先进高效的JS

按这些命令安装所需工具

cnpm install -D webpack@4

cnpm install babel-core --save

cnpm install babel-loader@7 --save

cnpm install babel-preset-env --save

cnpm install babel-preset-react --save

cnpm install react --save

cnpm install react-dom --save

//否则会类似以下的错误：

（ Error: Can't resolve 'babel-loader' in 'D:\work\webpack_test'）

（Module not found: Error: Can't resolve 'react' in 'D:\work\webpack_test\app'）

（Error: Couldn't find preset "react" relative to directory "D:\\work\\webpack_test\\app"）

（Error: Couldn't find preset "env" relative to directory "D:\\work\\webpack_test\\app"）

这类问题的解决方法：安装没找到的包或依赖，cnpm install xxx -save

（Couldn't find webpack@2 | 3 | 4）

这类问题是需要特定版本的工具：那就下载相应版本的工具 cnpm install -D webpack@4

然后修改文件，使用ES6和React编写代码，webpack打包成浏览器可以执行的html。

先在app文件夹里面添加config.json

{

  "greetText": "Hi there and greetings from JSON!"

}

修改其他文件

module.exports = {

  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件

  output: {

    path: __dirname + "/public",//打包后的文件存放的地方

    filename: "bundle.js"//打包后输出文件的文件名

  },

  module: {

        rules: [

            {

                test: /(\.jsx|\.js)$/,

                use: {

                    loader: "babel-loader",

                    options: {

                        presets: [

                            "env", "react"

                        ]

                    }

                },

                exclude: /node_modules/

            }

        ]

    },

}

//Greeter,js

import React, {Component} from 'react'

import config from './config.json';

class Greeter extends Component{

  render() {

    return (

      


        {config.greetText}

      

    );

  }

}

export default Greeter

// main.js

import React from 'react';

import {render} from 'react-dom';

import Greeter from './Greeter';

render(, document.getElementById('root'));

3.2CSS处理

3.2.1下载工具css-loader 和 style-loader

（css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。）

cnpm install --save-dev style-loader css-loader

修改webpack.config.js

module.exports = {

  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件

  output: {

    path: __dirname + "/public",//打包后的文件存放的地方

    filename: "bundle.js"//打包后输出文件的文件名

  },

  module: {

        rules: [

            {

                test: /(\.jsx|\.js)$/,

                use: {

                    loader: "babel-loader",

                    options: {

                        presets: [

                            "env", "react"

                        ]

                    }

                },

                exclude: /node_modules/

            },

            {

                test: /\.css$/,

                use: [

                    {

                        loader: "style-loader"

                    }, {

                        loader: "css-loader"

                    }

                ]

            }

        ]

    },

}

在app文件夹里创建一个名字为"main.css"的文件

/* main.css */

html {

  box-sizing: border-box;

  -ms-text-size-adjust: 100%;

  -webkit-text-size-adjust: 100%;

}

*, *:before, *:after {

  box-sizing: inherit;

}

body {

  margin: 0;

  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

}

h1, h2, h3, h4, h5, h6, p, ul {

  margin: 0;

  padding: 0;

}

并引用到main.js中去

//main.js

import React from 'react';

import {render} from 'react-dom';

import Greeter from './Greeter';

import './main.css';//使用require导入css文件

render(, document.getElementById('root'));

webpack后就可以在浏览器看到效果了。（index.html没有引入css，而是把css嵌入到了js中去，体现模块化的思想）

3.2.2实战CSS模块化——CSS module

被称为CSS modules的技术意在把JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块。Webpack对CSS模块化提供了非常好的支持，只需要在CSS loader中进行简单配置即可，然后就可以直接把CSS的类名传递到组件的代码中，这样做有效避免了全局污染。

先下载css-loader

cnpm install -D [email protected]

修改webpack.config.js

module.exports = {

  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件

  output: {

    path: __dirname + "/public",//打包后的文件存放的地方

    filename: "bundle.js"//打包后输出文件的文件名

  },

  module: {

        rules: [

            {

                test: /(\.jsx|\.js)$/,

                use: {

                    loader: "babel-loader",

                    options: {

                        presets: [

                            "env", "react"

                        ]

                    }

                },

                exclude: /node_modules/

            },

            {

                test: /\.css$/,

                use: [

                    {

                        loader: "style-loader"

                    },

                    {

                        loader: "css-loader",

                        options: {

                            modules: true, // 指定启用css modules

                            localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式

                        }

                    }

                ]

            }

        ]

    },

}

在app文件夹下创建一个Greeter.css文件

/* Greeter.css */

.root {

  background-color: #eee;

  padding: 10px;

  border: 3px solid #ccc;

}

导入到Greeter.js中

import React, {Component} from 'react';

import config from './config.json';

import styles from './Greeter.css';//导入

class Greeter extends Component{

  render() {

    return (

      
 //使用cssModule添加类名的方法

        {config.greetText}

      

    );

  }

}

export default Greeter

webpack后检查结果（可见class类名后面加入了hash值，避免了类名重复冲突）

3.2.3 CSS预处理器

sass

less

4.插件（Plugins）

...

5.vue