webpack是怎么?怎么用详解

最新推荐文章于 2024-08-08 10:51:22 发布

原创最新推荐文章于 2024-08-08 10:51:22 发布 · 340 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Webpack #什么是Webpack #打包工具

Webpack 专栏收录该内容

2 篇文章

订阅专栏

什么是Webpack?怎么使用Webpack?

1.什么是Webpack?
Webpack模块打包工具，它会分析模块之间的依赖关系，然后使用loaders处理它们，最后生成一个优化并合并后的静态资源。
简单的说就是打包，压缩各种静态资源的工具

2.目的？

性能优化
减少浏览器像服务器的请求次数
节约服务器的带宽资源
3.如何使用Webpack？

(1)Webpack的环境搭建

Webpack是基于Nodejs,运行在Nodejs环境下
使用Webpack之前要先搭建node环境
(2)全局安装Webpack

npm i -g webpack

(3)在终端使用npm init 自动创建package.json文件

npm init -y   //加上-y就不用再一路回车这么麻烦了

(4)安装Webpack

npm install webpack -D  //-D是装到开发依赖中

(5)安装Webpack的依赖包

npm install

(6)卸载webpack

npm uninstall webpack

(7)下载指定版本的Webpack

//例如：下载3.6.0版本的webpack
npm i webpack@3.6.0 -D

4.如何打包.js文件

第一先创建webpack的配置文件 webpack.config.js

module.exports={
    watch:true, //监听
    //入口文件
    entry:"./src/main.js",
    //出口文件
    output:{
        filename:"./dist/build.js"
    }
}

注：main.js文件是我们要打包的文件

build.js文件是我们打包后的输出文件

//main.js文件：
 
import jquery from "jquery";
import "./common/css/style.css";
import "./common/css/style.less"
jquery(function(){
    jquery("#box").css({
        width:300,
        height:200,
        background:"#f00"
    })
})

第二在package.json配置bulid
第三引文件(注意要引打包后的build.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>网页的入口文件</title>
    <script src="../dist/build.js"></script>
</head>
<body>
    <div id="box"></div>
    <div class="temp">我是keri</div>
</body>
</html>

第四在终端执行npm run build
```
npm run build  //打包完成
```
5.如何打包 .css/.less/.scss/.styl/图片
首先在main.js引入要打包的文件

//main.js 文件
import "./common/style.css";
import "./common/style.less";
import "./common/style.scss";
import "./common/style.styl";
import imgObj from "./img/1.png";

其次webpack.config.js 配置以下：

module.exports={
    watch:true,
    entry:"./src/main.js",
    output:{
        filename:"./dist/build.js"
    },
    module:{
        loaders:[
            {
                test:/\.css$/,
                loader:"style-loader!css-loader"
            },
            {
                test:/\.less$/,
                loader:"style-loader!css-loader!less-loader"
            },
            {
                test:/\.scss$/,
                loader:"style-loader!css-loader!sass-loader"
            },
            {
                test:/\.styl$/,
                loader:"style-loader!css-loader!stylus-loader"
            },
            {
                test:/\.(png|jpe?g|gif|psd|svg|ico)$/,
                loader:"url-loader"
            }
        ]
    }
}