学习笔记之webpack4+scss+babel+第三方库配置

最新推荐文章于 2024-05-09 22:17:24 发布

皆凡人

最新推荐文章于 2024-05-09 22:17:24 发布

阅读量1.5k

点赞数

分类专栏：前端工程化工具文章标签： webpack4

本文链接：https://blog.csdn.net/qq_37431724/article/details/90343899

版权

刚自学完一些webpack，总结一下笔记，并制作一个我要用的webpack-starter

主要配置：webpack4+scss+babel+bootstrap+jquery+fontawesome

一、基础知识了解

二、安装webpack

因为安装到全局环境下可能导致有的插件无法使用，以及不同的项目依赖的版本不同而出现问题，我选择安装到当前项目中。如果你使用的是webstorm，点击terminal在那里输入命令行即可。

1. 自动生成package.json文件，-y设置为默认值

npm init -y

2. 安装webpack文件及其cli，--save-dev简写为-D

npm install -D webpack webpack-cli

三、配置文件

此项目文件分布如下，不需要先提前建立，只是后面配置时路径有些多，所以先展示一下：

（一）设置出入口文件

1. 新建配置文件webpack.config.js，将其放在项目文件夹的根目录下，设置entry：入口文件和output出口文件。【建议了解一下出入口文件的概念。】

const path=require('path'); //node.js的语法，引入路径模块，为了输出的时候找绝对路径

module.exports = {
    entry: [
        './src/index.js', //入口文件为index.js,将其放在入口文件夹src中
    ],
    output: {
        path: path.resolve(__dirname, './dist/'), // path.resolve为node.js的固定语法，用于找到当前文件的绝对路径
        filename: 'js/index.bundle.js'// 输出的文件为index.bundle.js，将其放在出口文件夹dist的js文件夹中
    }
};

2. 创建入口文件src/index.js，出口文件创建与否都行，因为运行命令后会自动生成

3. 创建一个部分js文件src/js/main.js，导入到入口文件index.js中。

main.js

const show =(content)=>{
    const divBox = document.getElementById("divBox");
    divBox.innerHTML = `Hello, ${content}`;
};

export { show };

index.js

import {show} from './js/main';    //ES6导入模块的语法，ES6里导入的模块为js话不需要加后缀名
show('World');

4. 创建dist/html/test.html，用于查看打包好的js效果

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

<div id="divBox"></div>

</body>
<script src="../js/index.bundle.js"></script>
</html>

（二）配置模式

在package.json里配置production(生产) 和 development(开发) 模式。【建议了解一下这两种模式的区别。】

"scripts": {
  "dev": "webpack --mode development",
  &

最低0.47元/天解锁文章

皆凡人

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
学习笔记之webpack4+scss+babel+第三方库配置

刚自学完一些webpack，总结一下笔记，并制作一个我要用的webpack-starter主要配置：webpack4+scss+babel+bootstrap+jquery+fontawesome一、基础知识了解（一）前端工程化——构建工具的选型介绍：中文版：《前端工程化——构建工具选型：grunt、gulp、webpack》上文英文版：GULP VS GRUNT VS...
复制链接

扫一扫