Webpack入门

Webpack安装

npm install -g webpack webpack-cli  //全局安装
webpack -v    //查看版本号
npm init -y   //项目初始化

准备工作

创建src文件夹

在src下创建common.js

exports.info = function (str) {
    document.write(str);
}

在src下创建utils.js

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

在src下创建main.js  (es5写法)

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

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

创建配置文件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 #没有警告 , 开发环境
webpack --mode=production #没有警告 , 生产环境

此时可以创建一个html将生成的js文件引入查看效果...

CSS打包

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

Loader 可以理解为是模块和资源的转换器。

首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css

npm install --save-dev style-loader css-loader  //安装style-loader和 css-loader

在src文件夹下面创建一个.css文件style.css

body{
    background:pink;
}

在上方的main.js第一行引入style.css

require('./style.css');

修改webpack.config.js配置文件

在配置文件中新增module:{}的内容

const path = require("path"); //Node.js内置模块
module.exports = {
    //...,
    output:{},
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

浏览器查看效果...