webpack介绍及实现详细流程含代码讲解

一. 什么是webpack
webpack是一个前端资源加载/打包工具,他讲根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源
从如中我们可以看出,weboack可以将多种静态资源.js css less转换成一个静态文件,减少了页面的请求.
作用:把多个静态资源文件(js,css.less)打包成一个资源文件
开发完之后,项目部署前需要做的事情:
好处:多个静态资源文件就有多个请求,用webpack减少请求次数,提高执行效率.
具体演示:

1. 安装webpack

• 全局安装

npm install -g webpack webpack-cli

• 安装后查看版本号

webpack -v

这样表示已经安装成功了
2. 创建js文件,用于打包操作
3. 首先先创建一个common.js

exports.info = function (str) {
    document.write(str); //浏览器输出
}

再在src目录下面建一个utils.js

exports.info = function (str) {
    document.write(str); //浏览器输出
}

在创建main.js,引入上述两个文件

const common = require('./common.js')
const utils = require('./utils.js')

common.info('hello common '+utils.add(1,2))

4.然后我们用webpack打包:
创建webpack配置文件,配置打包信息,文件名为webpack.config.js

const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件
    },
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

5.命令行执行编译命令

webpack  #有黄色警告
webpack --mode=development # 没有黄色警告

在终端执行命令
这样就打包成功了
注意上述图片中黄色字体

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

mode选项没有被设置,需要设置mode的环境.也就是上述指令
webpack --mode=development
这样就没有警告了.而且生成的js文件不是一行了
最终效果测试:
创建一个html文件引入打包后的代码
<script src="dist/bundle.js"></script>
再通过浏览器打开:
这样就做到了js的打包

接下来我们来打包css
第一步:
创建一个css文件,写样式内容
css:

body {
    background-color: red;
}

第二步:

然后在main.js中引入css
第三步:
安装css加载工具

npm install --save-dev style-loader css-loader

第四步:
修改webpack-config.js文件
新增内容

    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }

最终执行结果:
webpack --mode=development

还有一种打包方式就是配置项目的npm运行命令,修改package.json文件

"script" :{
.....
"dev" :"webpack --mode=development"
}

运行npm命令执行打包

npm run dev