webpack -> vue Component 从入门到摒弃（三）

2024年2月15日 133次阅读 来源: 翻滚的猿

离上一篇已一个礼拜了，人的迁延症是没法救的，今晚趁着蒙蒙春雨，来表达表达情绪。
上一篇简朴引见了webpack的设置，这里轻微再做一一下延长

插件

插件能够完成更多 loader 不能完成的功用。插件的运用平常是在 webpack 的设置信息 plugins 选项中指定。
Webpack 自身内置了一些经常使用的插件，还能够经由过程 npm 装置第三方插件。接下来，我们应用一个最简朴的 BannerPlugin 内置插件来实践插件的设置和运转，这个插件的作用是给输出的文件头部增加解释信息。

修正 webpack.config.js，增加 plugins：

var webpack = require('webpack');
module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style-loader!css-loader'}
    ]
  },
  plugins:[
    new webpack.BannerPlugin('it is BannerPlugin')
  ]
}

然后运转 webpack，翻开 bundle.js，能够看到文件头部涌现了我们指定的解释信息：

/*! it is BannerPlugin */
/******/ (function(modules) { // webpackBootstrap
/******/     // The module cache
/******/     var installedModules = {};

/******/     // The require function

开辟环境

假如每一次文件的转变，都需要去运转一次webpack，那是一件很贫苦的事，比方我用的是sublime写代码，如果想运转一段代码，起首要用webpack打包，然后再阅读器上还要革新，几乎不能忍么。这里有两种解决方案

watch

看名字就晓得是监听的意义，我们来测试一下（ps:这里我们加个有意义的东西，–progress –colors，想晓得干吗用？运转一下你就晓得了）

$ webpack --progress --colors --watch

// --progress 在编译的时刻多了个进度显现
//--colors 一些代码的高亮
//--watch 虽然不必每次都运转webpack了，然则改完一次还需要革新阅读器，才会发生变化

webpack-dev-server

所以运用 webpack-dev-server 开辟效劳是一个更好的挑选。它将在 localhost:8080 启动一个 express 静态资本 web 效劳器，而且会以监听形式自动运转 webpack，在阅读器翻开 http://localhost:8080/ 或 http://localhost:8080/webpack… 能够阅读项目中的页面和编译后的资本输出，而且经由过程一个 socket.io 效劳及时监听它们的变化并自动革新页面。

# 装置
$ cnpm install webpack-dev-server -g

# 运转
$ webpack-dev-server --progress --colors

也许的webpack就引见到这吧，有了基本的明白后，你能够依据本身的需求，去官网举行响应的相识，也能够参考他人项目学一点履历，好了，这篇文章就完毕了，由于下一篇就要连系vueComponent了，在完成component的连系后，我相信你对webpack会有一个更好的熟悉。

webpack -> vue Component 从入门到摒弃（四
webpack -> vue Component 从入门到摒弃（二）
webpack -> vue Component 从入门到摒弃（一）
github源代码

    原文作者：翻滚的猿
    原文地址: https://segmentfault.com/a/1190000008578077
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞