WebPack | 从新开始

最新推荐文章于 2021-05-18 14:53:13 发布

jensonliu

最新推荐文章于 2021-05-18 14:53:13 发布

阅读量101

点赞数

分类专栏：前端 WebPack

本文链接：https://blog.csdn.net/qq_38765789/article/details/100764481

版权

前端同时被 2 个专栏收录

36 篇文章 1 订阅

订阅专栏

WebPack

2 篇文章 0 订阅

订阅专栏

接触WebPack，是在搭建vue项目时，vue-cli脚手架会自动搭建webpack环境，这让我对webpack没有一个很系统的认知，这里还是重新学习记录一下。

1.初始化WebPack

新建一个根目录webpack1

cd webpack1

//初始化，生成package.json依赖文件，-y可以省去配置
npm init -y  

//安装webpack (v4以上需要另外安装webpack-cli)
npm install webpack --save
npm install webpack-cli --save

// 创建webpack配置文件webpack.config.js
// 创建入口模板index.html
// 创建用于打包的js文件index.js
// 创建用于打包的css文件style.css

2. 打包Js文件

index.js:

import _ from 'lodash'
import './style/index.css'  

function createDomElement(){
    let dom = document.createElement('div');
    dom.innerHTML = _.join(['好','好学习','天天向上'],'');
   // dom.classList.add('box');
    return dom;
}
let divDom = createDomElement();

document.body.appendChild(divDom);

1. 在Index.js中编写一个添加dom的功能，在这里又引入了一个lodash库(是一个一致性、模块化、高性能的 JavaScript 实用工具库)。

2. 在webpack.config.js中添加配置

const path = require('path')
module.exports = {
    entry: './src/index.js',
    mode: 'development',
    output: {
        filename: "main.js",
        path: path.resolve(__dirname,'dist')
    },
}

3. 执行npx webpack对index.js进行打包，打包成一个dist文件,里面的main.js即为打包好的js文件

4. 在index.html中引入main.js

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>

    </body>
    <script src="./dist/main.js"></script>
</html>

4. 打开index.html, 出现了index.js中添加的dom，说明打包成功

2. 打包CSS文件

在打包好js后，dom成功创建，下面继续打包css，给字体变个色。

1. 首先需要安装css解析器

npm install css-loader --save

npm install style-loader --save

2. 在webpack.config.js中添加配置

const path = require('path')
module.exports = {
    entry: './src/index.js',
    mode: 'development',
    output: {
        filename: "main.js",
        path: path.resolve(__dirname,'dist')
    },

    // 新增css解析器
    module: {
        // 处理规则
        rules: [
            {
                // webpack解析css
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    }
};

3. 编写style.css

.box{
    font-size: 3rem;
    color: red;
}

4. 在index.js中手动添加样式

import _ from 'lodash'
import './style/index.css'

function createDomElement(){
    let dom = document.createElement('div');
    dom.innerHTML = _.join(['好','好学习','天天向上'],'');
    dom.classList.add('box'); //添加样式
    return dom;
}
let divDom = createDomElement();

document.body.appendChild(divDom);

5. 再次打包，效果与定义的样式一致

3. 打包Sass文件

npm i -D sass-loader node-sass

在webpack.config.js中改动规则，利用正则表达式去匹配scss/sass以及css文件，注意use中的加载器顺序是从右到左。

    module: {
        // 处理规则
        rules: [
            {
                // webpack解析css/scss/sass
                test:/\.(sc|sa|c)ss$/,
                use:['style-loader','css-loader','sass-loader']
            },
        ]
    }

新建一个scss文件

// box.scss

$color: #c09;
.box{
  background-color: $color;
}

在index.js中引入

import _ from 'lodash'
import './style/index.css'
import './style/box.scss'

function createDomElement(){
    let dom = document.createElement('div');
    dom.innerHTML = _.join(['好','好学习','天天向上'],'');
   dom.classList.add('box');
    return dom;
}
let divDom = createDomElement();

document.body.appendChild(divDom);

jensonliu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebPack | 从新开始

接触WebPack，是在搭建vue项目时，vue-cli脚手架会自动搭建webpack环境，这让我对webpack没有一个很系统的认知，这里还是重新学习记录一下。1.初始化WebPack新建一个根目录webpack1cd webpack1//初始化，生成package.json依赖文件，-y可以省去配置npm init -y //安装webpack (v4以上需要另外安...
复制链接

扫一扫