1、webpack4.0 基础配置

最新推荐文章于 2020-08-14 16:53:03 发布

YmwWow

最新推荐文章于 2020-08-14 16:53:03 发布

阅读量200

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/YmwWow/article/details/90115906

版权

webpack 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.webpack环境的搭建

npm install webpack webpack -D //开发环境受用

我使用的代码编辑工具是VScode，安装code runner插件很方便

2.webpack的默认打包

(1).简历项目文件夹

(2).项目目录结构

|-src

----index.js

|-index.html

(3).初始化项目 npm init -y

在index.js文件夹里面写一些东西，例如

//index.js
console.log('start learning webpack！')

接着打开cmd终端进入项目文件（vscode直接按Ctrl+`）

输入：npx webpack

然后就会在项目文件夹上生成一个dist文件夹，里面有main.js。

现在在index.html里面就可以引入这个main.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./dist/main.js"> </script>
</head>
<body>
</body>
</html>

3.webpack的基础配置

在项目根目录里面建立一个 webpack.config.js 文件，用来写配置

附上代码：

let path = require('path');
//console.log(path.resolve(__dirname,'dist'))
module.exports ={
    mode:'development',     //有两种模式，开发模式以及生产模式development production
    entry:'./src/index.js', //项目打包的入口文件，告诉webpack从哪个开始打包
    output:{                //这里是输出的意思
        filename:'main.js', //输出的文件名
        path:path.resolve(__dirname,'dist')//输出路径必须是绝对路径，这里使用node自带的path
    }
}

第一节学习笔记完毕！

YmwWow

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
1、webpack4.0 基础配置

1.webpack环境的搭建npm install webpack webpack -D //开发环境受用我使用的代码编辑工具是VScode，安装coderunner插件很方便2.webpack的默认打包(1).简历项目文件夹(2).项目目录结构 |-src ----index.js |-index.html(3).初始...
复制链接

扫一扫

专栏目录