webpack快速入门

50 篇文章 0 订阅
48 篇文章 3 订阅

                                             webpack快速入门

webpack中文网站: https://webpack.docschina.org/ 

* 了解Webpack相关
  * 什么是webpack
    * Webpack是一个模块打包器(bundler)。
    * 在Webpack看来, 前端的所有资源文件(js/css/img/less/...)都会作为模块处理
    * 它将根据模块的依赖关系进行静态分析,生成对应的静态资源
  * 理解Loader
    * Webpack 本身只能加载JS模块,如果要加载其他类型的文件(模块),就需要使用对应的loader 进行转换/加载
    * Loader 本身也是运行在 node.js 环境中的 JavaScript 模块
    * 它本身是一个函数,接受源文件作为参数,返回转换的结果
    * loader 一般以 xxx-loader 的方式命名,xxx 代表了这个 loader 要做的转换功能,比如 json-loader。
  * 配置文件(默认)
    * webpack.config.js : 是一个node模块,返回一个 json 格式的配置信息对象
  * 插件
    * 插件件可以完成一些loader不能完成的功能。
    * 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。
    * Webpack 本身内置了一些常用的插件,还可以通过 npm 安装第三方插件
* 学习文档 : 
  * webpack官方入门: http://webpack.github.io/docs/tutorials/getting-started/
  * Webpack中文指南: http://zhaoda.net/webpack-handbook/index.html
* 你将学到:
  * How to install webpack
  * How to use webpack
  * How to use loaders
  * How to use the development server
  * How to use image
* 初始化项目: package.json
  ```   
  {
    "name": "webpack_test",
    "version": "1.0.0"
  } 
  ```
* 安装webpack
  ```
  npm install webpack@1 -g  //全局安装
  npm install webpack@1 --save-dev  //局部安装
  ```
* 开始编译
  * 创建入口src/js/ : entry.js
    ```
    document.write("entry.js is work");
    ```
  * 创建主页面 build/: index.html
    ```
    <script type="text/javascript" src="js/build.js"></script>
    ```
  * 编译js
    ```
    webpack src/js/entry.js build/js/build.js  
    ```
  * 查看页面效果
* 第二个js
  * 创建第二个js: src/js/content.js
    ``` 
    module.exports = " <br> It works from content.js";
    ```
  * 更新入口js : entry.js
    ```
    * document.write("entry.js is works.");
    * document.write(require("./content.js"));
    ```
  * 编译js:
    ```
    webpack src/js/entry.js build/js/build.js
    ```
  * 查看页面效果
* 第一个加载器(loader)
  * 安装样式的loader
    ```
    npm install css-loader style-loader --save-dev
    ```
  * 创建样式文件: src/css/test.css
    ```
    body {
      background: red;
    }
    ```
  * 更新入口js : entry.js
    ```
    + require("style-loader!css-loader!../css/test.css");
    * document.write("entry.js is works.");
    * document.write(require("./content.js"));
    ```
  * 编译js, 并查看页面效果
    ```
    webpack src/js/entry.js build/js/bundle.js
    ```
* 绑定加载器
  * 更新入口js : entry.js
    ```
    - require("style-loader!css-loader!./test.css");
    + require("./test.css");
    ```
  * 编译:
    ```
    webpack src/js/entry.js build/js/bundle.js --module-bind css=style-loader!css-loader
    ```
  * 查看页面效果
* 使用webpack配置文件
  * 创建webpack.config.js
    ```
    module.exports = {
      entry: "./src/js/entry.js",//入口路径配置
      output: {//出口配置
          path: __dirname + '/build/js',//输出路径
          filename: "bundle.js"//输出文件名
      },
      module: {
        loaders: [//模块加载器配置
          { test: /\.css$/, loader: "style!css"}  //所有css文件声明使用css-loader和style-loader加载器
        ]
      }
    };
    ```
  * 编译
    ```
    webpack
    webpack --progress   //编译显示进度
    ```
  * 问题---每次修改模块文件内容的重新手动打包,刷新
  * 自动编译
    ```
    webpack --watch  //编译并启动监视(但需要刷新浏览器)
    
    ```
  * 浏览器自动刷新(热加载)----解决手动刷新浏览器问题
    ```
    npm install webpack-dev-server@1 -g
    webpack-dev-server
      访问: http://localhost:8080/webpack-dev-server/
          ; http://localhost:8080
      !!!发现问题----访问的是文件夹路径而不是页面
        devServer:{
              contentBase: './build',//内置服务器动态加载页面所在的目录
              historyApiFallback:true,//不跳转
              inline:true
          }
          
        contentBase : 默认webpack-dev-server为根文件夹提供内置的服务,如果其他目录下的文件
                      提供服务需要在此设置目录(我们设置为build文件夹)
        historyApiFallback : 开发单页面的时候非常有用,它依赖于H5的 history API,当
                            设置为true的时候所有的跳转都指向index.html;
        port:可以设置端口号,不设置时候默认为 8080
        inline : 设置为true的时候回自动刷新(有的版本需要配合hot : true使用)
        
      webpack-dev-server
      访问: http://localhost:8080
      
     问题:页面没有热加载,自动刷新,因为index的src引入的硬盘中的build文件而不是webpack-dev-server服务器内存中的build
    特点:
      自动编译并刷新界面
      不生成编译后的文件, 直接在内存中编译处理, 并启动服务器运行项目
    ```
* 加载图片
    * 安装依赖的loader
      ```
      npm install url-loader file-loader --save-dev
      url-loader比file-loader功能更加完善是对file-loader的上层封装,但二者需配合使用
      ```
    * 添加config中loader的配置
      ```
      { test: /\.(png|jpg)$/, loader: "url-loader?limit=8192" }  //如果图片小于limit就会进行Base64编码
      ```
    * 拷入2张图片: 
      * 小图: img/logo.png
      * 大图: img/big.jpg
    * 定义引用图片的样式: test.css
      ```
      #box1{
        background-image: url(../img/logo.jpg);
        height: 200px;
        width: 200px;
      }
      #box2{
        background-image: url(../img/big.jpg);
        height: 200px;
        width: 200px;
      }
      ```
    * 在页面引用样式或图片: index.html
      ```
      <div id="box1"></div>
      <div id="box2"></div>
      ```
    * 编译并浏览
      ```
      webpack-dev-server
      ```
    * 图片打包问题
        ```
        1、图片大于8kb的时候无法打包到js文件中,
        2、index.html引入js的时候发现没有打包进去的图片路径不对
        3、解决方法: 
            * //publicPath : './js/',//webpack的绝对路径,设置服务index.html资源的路径
        ```
* 配置npm script命令
  ``` 
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack"
  }
 
  npm start: 编译运行项目
  npm build: 编译打包
  
  ```
 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Webpack是一个主流的前端工程化解决方案,用于打包和构建前端应用程序。它可以将多个模块和资源打包成一个或多个bundle,以便在浏览器中加载。 要使用Webpack,你可以通过安装webpack命令行工具和配置文件来开始使用。在开发环境中,可以使用cheap-module-eval-source-map配置选项来生成源映射,而在生产环境中,可以使用none选项来关闭源映射。 为了更方便地使用Webpack,你可以安装和配置一些第三方插件。其中两个常用的插件是webpack-dev-server和html-webpack-plugin。webpack-dev-server可以在代码修改后自动进行打包和构建,而html-webpack-plugin可以自定义index.html页面的内容。 如果想快速入门Webpack,你可以按照以下步骤进行操作: 1. 安装Webpackwebpack命令行工具。 2. 在项目根目录下创建一个webpack.config.js文件,并配置Webpack的入口和出口文件以及其他需要的选项。 3. 在package.json中的scripts字段中增加命令,例如"build": "webpack"。 4. 运行npm run build命令,即可实现打包。 这样,你就可以通过Webpack来打包和构建你的前端应用程序了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [超详细 WebPack 入门教程](https://blog.csdn.net/qq_43682422/article/details/124054740)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [webpack快速入门教程](https://blog.csdn.net/weixin_57218747/article/details/117304221)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_无往而不胜_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值