Webpack打包 js 和 css 相关操作

Webpack是一个打包工具，把多个静态资源文件打包成一个文件

Webpack打包 js 文件操作

一、安装Webpack工具：npm install webpack -g
npm install webpack-cl -g

查看是否安装成功: webpack -v

二、创建文件用于打包操作
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'+utils.add(1,2));

项目结构

三、创建配置文件 webpack.config.js 配置打包信息

const path=require('path');     //node.js内置模块
  module.exports={
    entry:'./src/main.js',  //配置文件入口
    output:{
        filename:'bundle.js',   //输出文件
        path:path.resolve(__dirname,'./dist')    //输出路径
    },
    //mode: 'development' // 设置mode,development（开发模式）
  }

四、使用命令执行打包操作
直接在终端输入 webpack 但会出现黄色警告

表示没有设置mode，可以修改输入命令为 webpack --mode=development 表示为开发环境，这样不会出现警告
也可以直接在 webpack 的配置文件中设置 mode 为开发环境

五、创建一个HTML文件，引入打包后的 js 文件，使用浏览器查看效果
显示成功

Webpack 打包CSS操作

一、创建css 文件 style.css

二、main.js 中引入 style.css 文件

三、安装 CSS 加载工具

安装命令： npm install --save-dev style-loader css-loader

四、修改 webpack.config.js 配置文件

添加的代码为：

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

五、执行打包命令： webpack