webpack基础实践1

最新推荐文章于 2023-08-03 16:46:07 发布

原创最新推荐文章于 2023-08-03 16:46:07 发布 · 533 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

前端专栏收录该内容

52 篇文章

订阅专栏

这是个webpack的入门教程，看到网上blog大多是配置好了再解释，这样来的不太直观。本文从第一步开始慢慢做起，一步一步走下来，最后再总结，这样直观看到每个配置行代表什么含义。
webpack的作用是什么？现在说太多可能对于入门的同学来说也不好理解，索性这里就记住一句话，一张图得了
一张图

一句话
webpack是能把各种资源，例如JS(JSX),coffee,样式(CSS/SASS/LESS),图片作为模块来进行打包和处理。

1.安装

1.1 安装全局webpack

前提是在本地先安装了node.js.

$ npm install webpack -g

1.2 将依赖写入package.json

新建的话：

npm init

一路回车就可以，其实这些都是项目的描述信息和git地址等信息，这些信息我们可以后面再文件中直接修改
如果是clone的项目，已经有package.json文件了，就运行命令(忽略步骤1.3,2.3引入css加载器部分)

npm install

1.3 安装局部webpack

npm install webpack --save-dev

2.开始使用

2.1 起步

entry.js作为我们的入口文件，其中会包含其他模块(js)或者是CSS

document.write("入口entry.js");

index.html

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

运行webpack命令

$ webpack ./entry.js bundle.js

然后index.html就可以work了

入口entry.js

2.2 引入其他模块

content.js

module.exports = "模块content.js";

entry.js

document.write(require("./content.js"));

编译命令同上
运行index.html结果

模块content.js

2.3 引入CSS

引入css加载器

npm install css-loader --save-dev
npm install style-loader --save-dev

style.css

body {
    background: yellow;
}

entry.js

require("!style!css!./style.css");
document.write(require("./content.js"));

最后编译，就是这么简单随意完成了，如果我们想这样require("./style.css");引入css，岂不是更加完美
使用编译命令

webpack ./entry.js bundle.js --module-bind 'css=style!css'

2.4 引入SASS文件

引入sass加载器

npm install node-sass --save-dev
npm install sass-loader --save-dev

index.scss

body{
    color:white;
}

同css一样
entry.js

require("!style!css!sass!./index.scss");

当然我们还不是很满意。简单点，编译命令的方式简单点。所以我们来到了配置文件

3.配置文件

新建文件webpack.config.js

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" },//css加载器
            { test: /\.scss$/, loader: "style!css!sass" }//sass加载器
        ]
    }
};

编译命令就剩下这样的

webpack

5.图片的打包

图片是用url-loader加载的。css中的url属性，其实就是一种封装过的require操作。

npm install url-loader --save-dev
npm install file-loader --save-dev

webpack.config.js

{test: /\.(jpg|png)$/, loader: "url?limit=8192"}

在js中 entry.js

var img = document.createElement("img"); 
img.src = require("./img/webpack.png"); 
document.body.appendChild(img);

或者直接在css中写

div.img{
    width: 300px;
    height: 300px;
    background: url("./img/font-icon.png");//小于8kb的图片会打包处理成Base64的图片
}

6.常用webpack编译命令

webpack //基本命令
webpack --progress --colors //显示打包过程
webpack -w //实时进行打包更新，文件改变时候，自动打包
webpack -p // 对打包后的文件进行压缩，提供production
webpack -d // 提供source map，方便调试。

关于对图片打包 AMD/CommonJS/ES6的使用在下一篇博客中webpack基础实践2
参考文章
- webpack官网-getting-start
- webpack前端模块加载工具