脚本宝典收集整理的这篇文章主要介绍了

学点Webpack吧

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

开始 webpack 之旅

npm install webpack --save-dev

这里如果没有指定 -g全局安装,那么需要调用 node_modules 下的 webpack.js 来执行,因为非全局安装没有添加环境变量

尝尝鲜,做点 webpack

必须的第一步:编写 webpack.config.js

// webpack.config.js
module.exports = {
  // 两个必须参数:
  entry: '', // 入口文件,写路径即可
  output: {  // 打包后文件,有两个参数:
    filename: '',   // 文件名,'[name]'表示使用原名,'[hash]'使用哈希值
    path: '',       // 文件夹路径,对着官方敲,path.resolve(__dirname, '文件夹名'),需先导入
    publicPath: '', // 上线地址,例如 http://ningtaostudy.cn
  },
};

现在碗和米饭有了,怎么端起来吃呢

直接在命令行运行 webpack,再加点料:

webpack 
    --display-reasons 
    --progress 
    --colors 
    --display-modules 
    --config # webpack 配置文件名(换个碗吃饭)

在 npm 脚本里写指令(偷懒让别人帮你盛饭),接着命令行里运行 npm run webpack

{
    "scripts": {
        "webpack": "webapck --progress --colors"
    }
}

饭吃到了,没有菜(webpack 插件)怎么行呢

打包 html 的插件 html-webpack-plugin。惯例第一步 npm install,接着在 webpack.config.js 里配置插件,有了 entry output 出头鸟,我们知道该写一个 plugin 了:

// webpack.config.js
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new htmlWebpackPlugin({
      filename: '[name]-[hash].html',
      template: 'index.html',
      inject: 'head',
      kill: 'bill',
    }),
  ],
};
        

让我们来品品小当家的菜:

  • filename 很好,不就入口文件吗
  • template 你不用说,我知道是模板,相对于配置文件的路径
  • inject 我就不遵从开发最佳实践,就要在head里加载js文件,打我呀
  • kill 杀死比尔,纯属虚构。这是自定义的模板,模板里调用,下面举个栗子:

    <!-- index.html -->
    <!-- template 里的文件是 index.html,使用自定义模板来确定标题 -->
    <title><%= htmlWebpackPlugin.options.kill %><title>
    
    <!-- 转化后 -->
    <title>bill</title>

上面代码一样一样的。老夫斗胆说一句,这里模板引擎类似 jsp,但还是 js 语法

去官网看看 小当家

来瓶酒(loaders)吧,生活美滋滋

loader 用来加载资源文件,诸如图片、css之类的,这样我们就可以在 .js 里导入 css,你没听错,用起来我也没有在蒙你

最简单常用来加载 css 的两个 loader:

npm install style-loader css-loader --save-dev
# style-loader 用来插入 style 标签
# css-loader 用来加载 css 代码,此 loader 居下

话不多说,开车:

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

看起来嵌套挺多的哈,不过很简单。modules 下的 rules 包含很多匹配规则(正则表达式),每一条代表加载什么类型的资源文件,上面写的就是加载 .css 样式文件,并使用 style-loadercss-loader 加载。

现在问题来了,我想喝瓶茅台(自动添加浏览器产商前缀)。没问题,强大的 webpack 生态圈给你提供了 postcss-loader,一个更高大上的 loader。这个时候我们都知道只需要改一下 use 数组

[
  'style-loader',
  {
    loader: 'css-loader',
    options: {
      importLoaders: 1
    },
  },
  'postcss-loader'
]

数组的项可以是对象,这样我们的 loader 就能带 options 里的参数,等同于:

use: 'style-loader!css-loader?importLoaders=1!postcss-loader'

至于为什么要带这样的参数,这是因为一个 @import 引发的血案

webpack-dev-server 大厨来也

我是谁,我从哪里来,我又该到哪里去

日益繁重的前端工作下,没有人能阻挡我们偷懒的步伐。。webpack 只是一个打包工具,即使我们能带 --watch 自动编译,但浏览器还得手动刷新(心中一个卧槽,尼玛还有这种操作,曾经学习的一年里自己起码动手刷新浏览器点了 10000 次,忍不住吐槽浏览器刷新按钮就不能做一个浮动的吗,还得移动大半个屏幕,我鼠标少说走了 1000m 了)。很好,在灵长类动物面前都不是问题:

npm install webpack-dev-server -D # 这个不是重点,缩写而已

接下来配置 webpack,其实官网很详细了,还带中文的,比个赞

// webpack.config.js
module.exports = {
  devServer: {
    contentBase: './dist', // 根目录,就像 apache 的 www 文件夹
  },
};

然后呢卧槽?没错,好了,输入吧肿瘤君:

webpack-dev-server --open

偷懒神(package.json)在此:

{
    "scripts": {
        "start": "webpack-dev-server --open --color"
    }
}

再运行 npm start,这次连 run 都省了,,,

好了,以上就是初步了解 webpack 了,再总结一下吧

配置项一览:

// webpack.config.js
module.exports = {
  entry: '',
  output: {},
  module: {
    rules: [],
  },
  plugins: [],
  devServer: {},
  devtool: 'inline-source-map', // 开发环境下调试专用,快速定位错误文件位置
};

常用 loader:

  • 加载 html:html-webpack-plugin、html-loader
  • 加载 css:style-loader、css-loader、sass/less-loader
  • 加载 es6babel-loader
  • 加载图片、json 等文件:file-loader、url-loader(转base64)、image-loader(压缩)、json-loader

上面的这些 loader 都可以去 npmjs 官网 上查看详细的配置

-loader 在 webpack 2+ 不能省略;html 插件和 loader(加载模板)不能混着用

总结

以上是脚本宝典为你收集整理的

学点Webpack吧

全部内容,希望文章能够帮你解决

学点Webpack吧

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过