Webpack安装和使用

最新推荐文章于 2023-12-06 17:18:28 发布

TCRookie

最新推荐文章于 2023-12-06 17:18:28 发布

阅读量149

点赞数

分类专栏： npm 文章标签： npm webpack

本文链接：https://blog.csdn.net/weixin_44773752/article/details/115662546

版权

npm 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Webpack安装和使用

文章目录

Webpack安装和使用

1.创建一个项目包，打开终端，输入指令

npm install -g webpack webpack-cli

在这里插入图片描述

2.查看webpack版本号

webpack -v

在这里插入图片描述若出现以下报错

输入指令：

set-ExecutionPolicy RemoteSigned

在这里插入图片描述

3.初始化项目

npm init -y

4.测试使用Webpack

4.1创建测试代码文件

在这里插入图片描述

//common.js文件
exports.info = function(str){
    document.write(str)
}

//utils.js文件
exports.add = function(a, b) {
    return a + b
}

//main.js文件
const common = require('./common')  //引入common.js包
const utils = require('./utils')    //引入utils.js包

//调用方法
common.info("hello Webpack!!" +  utils.add(5,20))

4.2打包js配置

（1）创建配置文件 webpack.config.js，同时创建一个 dist文件夹
在这里插入图片描述

读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包
打包后的文件放入当前目录的dist文件夹下
打包后的js文件名为bundle.js

//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'//输出文件
    }
}

（2）方法一：执行打包命令，执行后查看bundle.js 里面包含了上面两个js文件的内容并进行了代码打包

webpack --mode=development

在这里插入图片描述（2）方法二：也可以配置项目的npm运行命令，修改package.json文件。
运行npm命令执行打包

"scripts": {
//...,
"dev": "webpack --mode=development",
"prod": "webpack --mode=production"
 }

在这里插入图片描述

npm run dev #开发打包
或
npm run prod #生产打包

（3）创建一个01.html文件，引入，运行测试

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

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

在这里插入图片描述

4.3 打包css配置

安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让
javascript 认识css

npm install -D style-loader css-loader

在webpack.config.js文件中加入

module: {
        rules: [
            {
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }
        ]
    }

在这里插入图片描述

在src下创建一个add.css文件

body{
    background-color: green;
    text-align: center;
}

在main.js中引用css文件

重新生成bundle.js文件

webpack --mode=development

再次运行01.html文件

TCRookie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Webpack安装和使用

Webpack安装和使用文章目录Webpack安装和使用1.创建一个项目包，打开终端，输入指令2.查看webpack版本号3.初始化项目4.测试使用Webpack4.1创建测试代码文件4.2打包js配置4.3 打包css配置1.创建一个项目包，打开终端，输入指令npm install -g webpack webpack-cli2.查看webpack版本号webpack -v3.初始化项目npm init -y4.测试使用Webpack4.1创建测试代码文件//common.
复制链接

扫一扫