Webpack快速入门

LMou 发布于2019-08-01 17:12 / 679人阅读

摘要：了解相关什么是是一个模块打包器。配置文件默认是一个模块，返回一个格式的配置信息对象插件插件件可以完成一些不能完成的功能。插件的使用一般是在的配置信息选项中指定。

了解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...

Webpack中文指南: http://zhaoda.net/webpack-han...

你将学到:

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

编译js

webpack src/js/entry.js build/js/build.js

查看页面效果

第二个js

创建第二个js: src/js/content.js

module.exports = " 
 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

编译并浏览

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: 编译打包

GPU云服务器云服务器 webpack入门前端快速入门云计算快速入门 css快速入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51012.html

Webpack快速入门

摘要：了解相关什么是是一个模块打包器。配置文件默认是一个模块，返回一个格式的配置信息对象插件插件件可以完成一些不能完成的功能。插件的使用一般是在的配置信息选项中指定。了解Webpack相关什么是webpack Webpack是一个模块打包器(bundler)。在Webpack看来, 前端的所有资源文件(js/css/img/less/...)都会作为模块处理它将根据模块的依...

laznrbfe 2019-08-20 18:13 评论0 收藏0
Webpack快速入门

摘要：了解相关什么是是一个模块打包器。配置文件默认是一个模块，返回一个格式的配置信息对象插件插件件可以完成一些不能完成的功能。插件的使用一般是在的配置信息选项中指定。了解Webpack相关什么是webpack Webpack是一个模块打包器(bundler)。在Webpack看来, 前端的所有资源文件(js/css/img/less/...)都会作为模块处理它将根据模块的依...

curried 2019-08-29 12:58 评论0 收藏0
Webpack系列—快速入门

摘要：如使用插件为我们自动生成一个文件。安装使用生产和开发构建分离生产和开发中的构建肯定是不同，生产中侧重于一个更好的开发体验，而生产环境中则需要更多的性能优化，更小的。可以指定命令运行以来的配置文件，通过在中写入是一种不错的方式。原文地址：https://github.com/huruji/blog/issues/3 入口单文件入口指定entry键值 const config = { ...

TIGERB 2019-08-20 19:08 评论0 收藏0
vue-cli “从入门到放弃”

摘要：主要作用目录结构本地调试代码部署热加载单元测试在如今前端技术飞速发展的时代，和作为前端框架已经呈现出了三国鼎立的局面。主要作用：目录结构、本地调试、代码部署、热加载、单元测试在如今前端技术飞速发展的时代，angular.js、vue.js 和 react.js 作为前端框架已经呈现出了三国鼎立的局面。作为国人若你不知道 vue，小生表示可以理解，如果作为中国的前端猿不知道 vue，...

DrizzleX 2019-08-01 17:19 评论0 收藏0
vue-cli “从入门到放弃”

摘要：主要作用目录结构本地调试代码部署热加载单元测试在如今前端技术飞速发展的时代，和作为前端框架已经呈现出了三国鼎立的局面。主要作用：目录结构、本地调试、代码部署、热加载、单元测试在如今前端技术飞速发展的时代，angular.js、vue.js 和 react.js 作为前端框架已经呈现出了三国鼎立的局面。作为国人若你不知道 vue，小生表示可以理解，如果作为中国的前端猿不知道 vue，...

william 2019-08-20 18:28 评论0 收藏0