Webpack

什么是Webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

Webpack安装

命令：
npm install -g webpack webpack-cli
安装后查看版本号
webpack -v

使用webpack

创建js文件用于打包操作，在common.js，utils.js中定义方法在mian.js中引入common和utils

common.js

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

utils.js

exports.add = function (a, b) {
    return a + b;
}

main.js

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

common.info('Hello world!' + utils.add(100, 200));

创建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' //输出文件
    }
}

使用命令执行打包

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

也可以配置项目的npm运行命令，修改package.json文件

"scripts": {
    //...,
    "dev": "webpack --mode=development"
 }

运行npm命令执行打包

npm run dev

使用webpack命令出现警告

使用webpack --mode=development命令无警告

测试

创建一个html文件，引入打包后的js文件，使用浏览器查看效果

<script src="dist/bundle.js">
</script>

打包css文件

1.创建css文件，写样式内容

body {
    background-color: brown;
}

2.在main.js中引入css文件

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

//css文件引入,后缀不能省略
require('./style.css')
common.info('Hello world!' + utils.add(100, 200));

3.安装style-loader和 css-loader

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

4.修改webpack配置文件

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']
            }  
        ]  
    }
}

测试