Webpack快速入门

最新推荐文章于 2022-06-24 23:12:50 发布

itcats_cn

最新推荐文章于 2022-06-24 23:12:50 发布

阅读量210

点赞数 1

分类专栏：前端文章标签： webpack nodejs

本文链接：https://blog.csdn.net/itcats_cn/article/details/85411116

版权

前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1.什么是webpack？

由上图看出，webpack可以将众多的静态资源(js、css、less)转化为一个静态文件，减少了页面请求，下面的篇幅我将为大家简单介绍一下webpack的使用

2.安装webpack

执行全局安装webpack

npm install webpack -g

全局安装webpack-cli(webpack客户端)

npm install webpack-cli -g

安装后查看安装的版本号

webpack -v

3.使用webpack对js进行打包

参考webpack中文文档：https://www.webpackjs.com

1.在src同级目录下创建webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
      path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

2.终端进入配置文件(webpack.config.js)所在目录下，执行命令

webpack

3.在该目录下创建index.html

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

4.查看index.html 内容正常输出，打包完成

4.使用loader插件对css打包

详情参见：https://www.webpackjs.com/concepts/loaders/

(1)安装style-loader和css-loader

webpack只能对js文件进行打包，如果需处理其他类型的文件就需要使用loader进行转换了。

Loader可以理解为模块和资源的转换器，它本身是一个函数，接收源文件作为参数，返回转换的结果。这样，我们就可以通过require来加载任何类型的模块或文件。css-loader是将css装载到javascript，style-loader是让javascript认识css

cnpm install style-loader css-loader --save-dev

(2)修改webpack.config.js

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: ['css-loader','style-loader']},
    ]
  }
};

(3)在src文件夹中创建css1.css

body{
  background:red
}

在main.js中导入

required('./css1.css')

(4)重新打包执行：webpack

itcats_cn

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Webpack快速入门

1.什么是webpack？由上图看出，webpack可以将众多的静态资源(js、css、less)转化为一个静态文件，减少了页面请求，下面的篇幅我将为大家简单介绍一下webpack的使用 2.安装webpack执行全局安装webpacknpm install webpack -g全局安装webpack-cli(webpack客户端)npm install web...
复制链接

扫一扫