资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/webpack的那些事儿

webpack的那些事儿

TNFE / 1147人阅读

摘要：不管是还是，其实都是基于实现的。文件，看名字就知道它是的配置文件。接下来会向外暴露可以指定是环境还是环境。这个有点不一样的是他依赖一个的配置文件。注意这三个的顺序不能错，是从右往左执行的。到这里，一个小小的脚手架雏形其实就有了。

不管是vue-cli还是react-sprite，其实都是基于webpack实现的。试想，如果没有脚手架，你自己能搭一个吗？看完这篇博客，让你明白webpak都有些什么东西 

 webpack其实没有那么神奇，就是一个打包工具，而且它本身只能打包js，而图片，css，html其实都是依靠它的loader和plugin完成的。 

webpack.config.js文件，看名字就知道它是webpack的配置文件。该文件一般包括：入口entry，出口output，loader和插件plugin

const path = require("path")
module.exports = {
  mode: "development",
  entry: "./src/1.js",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js"  },
  module: {
    rules: [{
      test: /.css$/,
      use: ["style-loader", "css-loader", "postcss-loader"]
    }]
  }}

来解析下上面的代码，

第一行的path其实是node的核心模块，webpack其实就是基于node的产物，你的电脑要是没有node，你也装不了webpack的。 

接下来会向外暴露： 

mode可以指定是development环境还是production环境。脚手架没有这一项，因为它已经分了dev.conf.js和prod.conf.js。 

entry指定你要打包的入口文件，

output指定你要打包到哪和打包文件的名字。

module模块一般用来设置你代码中要打包的css，图片之类的loader。

上面就是解析css的loader，肯定有人好奇为什么会有三个： 

style-loader：将会创建style标签，将样式放到页面中 

css-loader：将css代码转成js能接受的字符串 

post-loader：寻找那些需要浏览器兼容加前缀的样式，比如-webkit-，你没加，但loader会帮你补全，是不是很省心。这个loader有点不一样的是他依赖一个autoprefixer的配置文件。

这也就能解释为什么你的项目中引入less，sass之类的扩展语言要写三个loader。  

注意：这三个loader的顺序不能错，loader是从右往左执行的。 接下来的devtool不是必须的，他会保留代码编译前的模样，方便调式，上线一定要关掉，不然会让你打包的大小增大很多。   自己配置一个webpack：


上面的build里的bundle.js就是打包后生成的文件。webpack.config.js就是上面的代码，postcss.config.js就是postcss-loader需要的配置文件

//1.js
import "../css/1.css"
console.log(111)

//postcss.config.js
const autoprefixer = require("autoprefixer")
module.exports = {  plugins: [    autoprefixer  ]}

//1.css
#div1 {
  width: 200px;
  height: 200px;
  transition: 1s all ease;
  background-color: rgb(148, 148, 148);
}
#div1:hover {
  transform: rotateY(60deg)
}

此时，在命令行中运行webpack，就会生成上面的build文件夹，打开index.html，你会发现，这就是我们自己写的css和js。这样就完成了打包，是不是很简单？

我们可能还会好奇webpack为什么能够起一个服务环境，实现热更新等功能，这就不能不说webpack-dev-server了。

实现热更新：

这个不需要我们配置，但需要依赖，所以我们要：

npm i webpack webpack-cli webpack-dev-server

注意：这里的启动命令要在package.json文件里配置

{  
"scripts": { 
   "dev": "webpack-dev-server --progress --hot",  
},  
"devDependencies": {
    "autoprefixer": "^9.5.1",
    "css-loader": "^2.1.1", 
   "postcss-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  }}

此时，你在命令行输入npm run dev，会发现你的项目已经监听8080端口啦


如果要配置webpack-dev-server，也可以在webpack.config.js中进行配置:

devServer:{
    hot: true,        //设置热更新
    host: "localhost", //可选，ip
    port: 3000, //可选，端口
    contentBase:path.resolve(__dirname,"build"), //可选，基本目录结构
    compress: true, //可选，压缩    proxy: {
        "/api": {
            target: "http://localhost:8081",
            pathRewrite: {"^/api": "/data"} 
//本来是反向代理去http://localhost:8081/api，rewrite之后就反向代理去http://localhost:8081/data
        }
    }}

到目前为止，我们生成的index.html文件其实还是本地文件，那么我们如何生成一个服务器访问的html文件呢？这里就要引入html-wepack-plugin插件了。

npm i html-webpack-plugin -S

  plugins: [
    new HtmlWebpackPlugin({
      template: "./build/index.html"
    }),    
new webpack.HotModuleReplacementPlugin({})
  ]}

这里我把我build文件夹下的index.html。

到这里，一个小小的脚手架雏形其实就有了。剩下的就是配置各种各样的loader啦

因为loader的配置都是大同小异，这里就不做过多介绍。

具体可以戳这里www.webpackjs.com/loaders/

附上完整的webpack.config.js

const path = require("path")
const webpack = require("webpack")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  mode: "development",  entry: "./src/1.js",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js"  
},  
module: {
    rules: [
        { test: /.css$/,      use: ["style-loader", "css-loader", "postcss-loader"]    }
    ]
  },
  devServer: {
    host: "localhost", //可选，ip
    port: 3000, //可选，端口
    contentBase: path.resolve(__dirname, "build"), //可选，基本目录结构
    compress: true, //可选，压缩    hot: true  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./build/index.html"
    }),
    new webpack.HotModuleReplacementPlugin({})
  ]}


私有云 idc机房托管 回事儿 webpack的作用 webpack的cdn 那些奇怪的错误

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

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

相关文章

  • webpack2的那些事儿 ------ 生成的文件是怎么运行的

    摘要：打算写几篇文章如果能坚持的话来总结下，文章不是教你怎么使用，而是让你更好的了解你在使用的是怎么去运行的，想来想去，第一篇就先介绍下生成的文件，是怎么去执行的。 谢谢你们看我扯技术，最近在对webpack2进行的配置进行梳理和学习，webpack是在去年使用vue开始接触的，个人感觉webpack 融入到编程过程中，提供了模块化，将各种类型的文件都看成模块，通过不同的 loader 进行...

    anonymoussf 评论0 收藏0

  • webpack4.0实战那些事儿

    摘要：刚刚发布，官网自称最大的特点就是零配置。本文就详细介绍一下实战那些事儿。自动刷新监听本地源代码的变化，自动重新构建刷新浏览器。自动发布更新完代码后，自动构建出线上发布代码并传输给发布系统。代码块，一个由多个模块组合而成，用于代码合并与分割。 webpack4.0刚刚发布，官网自称4.0最大的特点就是零配置。本文就详细介绍一下webpack4.0实战那些事儿。 1 什么是WebPack ...

    褰辩话 评论0 收藏0

  • 前端模块化的那些事儿

    摘要：规范异步模块声明规范公共模块声明模块化的核心价值模块化最核心的价值在于解决不同文件之间的分工和调用问题，即依赖关系。 一、什么是模块？ 定义：具有相同属性和行为的事物的集合在前端中：将一些属性比较类似和行为比较类似的内容放在同一个js文件里面，把这个js文件称为模块目的：为了每个js文件只关注与自身有关的事情，让每个js文件各行其职 二、什么是模块化？CommonJS是什么？AMD和C...

    aaron 评论0 收藏0

  • 浅谈Vue模板的那些事儿

    摘要：接触过的童鞋都知道，组件的模板一般都是在选项内定义的，如我是闰土大叔这个用法都是老生常谈了，今天来聊聊的内联模板。作者闰土大叔链接来源著作权归作者所有。 showImg(https://segmentfault.com/img/bV1Og9?w=554&h=294); 接触过vue的童鞋都知道，组件的模板一般都是在template选项内定义的，如： 1 Vue.component(ch...

    focusj 评论0 收藏0

  • webpack4.0优化那些事儿

    摘要：配置以何种方式导出库。当检测文件不再发生变化，会先缓存起来，等等待一段时间后之后再通知监听者，这个等待时间通过配置。发布到线上给用户使用的运行环境。 一 缩小文件搜索范围 1 include & exclude 1) action 限制编译范围 2) useage module: { rules: [ { test...

    levy9527 评论0 收藏0

发表评论

登陆后可评论

0条评论

TNFE

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<