webpack 学习

学习链接：https://malun666.github.io/aicoder_vip_doc/#/pages/vip_2webpack

1. 初始化一个package.json文件

npm init -y

2. 安装webpack

npm i -D webpack

3. 如果webpack的版本是4.0以后的需要再安装webpack-cli

npm i -D webpack-cli

4. 安装lodash依赖

npm i  lodash -p

5. 简单的demo。

文件目录：

js文件

import _ from 'lodash';

function createDomElement() {
    var dom = document.createElement("div");
    dom.innerHTML = _.join(['你好', '哈哈', 'webpack'], '');
    return dom;
}

document.body.appendChild(createDomElement());

webpack.config.js文件

const path = require('path'); //定义绝对路径

//对外导出一个对象
module.exports = {
    mode: 'development', //开发阶段
    entry: './src/index.js', //入口文件
    //输出
    output: {
        filename: 'main.js', //打包后的文件名
        path: path.resolve(__dirname, './dist') //打包文件的路径，resolve将相对路径转化为绝对路径，dirname表示当前目录
    }
}

然后执行构建任务

npx webpack

生成main.js文件，运行index.html即可看到效果

加载css文件

第一步： 安装 css 和 style 模块解析的依赖 style-loader 和 css-loader

npm i style-loader css-loader

第二步： 添加 css 解析的 loader

const path = require('path'); //定义绝对路径

//对外导出一个对象
module.exports = {
    mode: 'development', //开发阶段
    entry: './src/index.js', //入口文件
    //输出
    output: {
        filename: 'main.js', //打包后的文件名
        path: path.resolve(__dirname, './dist') //打包文件的路径，resolve将相对路径转化为绝对路径，dirname表示当前目录
    },
    module: {
        rules: [{
            test: /\.css$/, //正则表达式判断是css文件
            use: ['style-loader', 'css-loader'] //执行顺序，从右到左
        }]
    }
}

第三步：修改相应的文件

import _ from 'lodash';
import './style.css'; //需要导入依赖  loader => css-loader , style-loader ,modules

function createDomElement() {
    var dom = document.createElement("div");
    dom.innerHTML = _.join(['你好', '哈哈', 'webpack'], '');
    dom.classList.add('body')
    // dom.className = 'body'
    return dom;
}

document.body.appendChild(createDomElement());

加载sass文件

先加载依赖    npm i -D sass-loader node-sass

再修改module

  module: {
        rules: [{
            test: /\.(sa|c|sc)ss$/, //正则表达式判断是css文件
            use: ['style-loader', 'css-loader', 'sass-loader'] //执行顺序，从右到左
        }]
    }

相应的sass文件

$bgcolor:#c09;

.body{
    background-color:$bgcolor;
    font-size:25px
}

在js里面引入sass

import './style/s.scss'