npmjs

发表于 | 阅读次数:

包

1、css-loader
The css-loader interprets @import and url() like import/require() and will resolve them.
日期：2018-03-16 10:35:34，版本：0.28.11
日期：2017-03-13 13:45:04，版本：0.27.3

1
npm i -D css-loader

1
2
3
4
5
6
7
8
9
10
11
12
13
var config = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

2、style-loader
Adds CSS to the DOM by injecting a style tag
日期：2018-03-09 11:40:21，版本：0.20.3
日期：2017-03-28 13:29:00，版本：0.16.1

1
npm i -D style-loader

1
2
3
4
5
6
7
8
9
10
11
12
13
var config = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

3、extract-text-webpack-plugin
Extract text from a bundle, or bundles, into a separate file.（提取样式到一个独立的文件中，而不是以style方式插入到头部）
日期：2017-10-25 17:10:40，版本：3.0.2，不支持 webpack >= 4
日期：2017-03-05 09:02:27，版本：2.1.0

1
npm i -D extract-text-webpack-plugin

1
2
3
4
5
6
7
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var config = {
  plugins: [
    // 重命名提取后的 css 文件
    new ExtractTextPlugin("main.css")
  ]
};
1
2
3
4
5
6
7
8
9
10
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var config = {
  plugins: [
    // 使用异步路由后，要把每一个块（例如0.chunk.js）打包进 main.css（否则会以 style 方式插入到 head 中）
    new ExtractTextPlugin({
      filename: 'main.css',
      allChunks: true
    })
  ]
};

4、vue
日期：2018-03-13 22:14:28，版本：2.5.16
日期：2017-03-27 02:46:27，版本：2.2.6

1
npm i -S vue

5、vue-loader
Vue.js component loader for Webpack.
日期：2018-03-23 20:18:17，版本：14.2.2
日期：2017-03-29 07:37:41，版本：11.3.4

1
npm i -D vue-loader

6、vue-style-loader
This is a fork based on style-loader. （大部分情况下不用安装，而作为 vue-loader 的依赖。当用 extract-text-webpack-plugin 提取 vue 中的 css 时，会用到）
日期：2018-03-20 20:04:03，版本：4.1.0
日期：2017-03-28 13:16:56，版本：2.0.5

1
npm i -D vue-style-loader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var config = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            css: ExtractTextPlugin.extract({
              use: 'css-loader',
              fallback: 'vue-style-loader'
            })
          }
        }
      }
    ]
  }
};

7、vue-template-compiler
This package can be used to pre-compile Vue 2.0 templates into render functions to avoid runtime-compilation overhead and CSP restrictions. （作为 vue-loader 的依赖，不独立使用，除非有特别的需求。vue-loader 11.3.4 依赖于它，不安装报错）
日期：2018-03-13 22:14:12，版本：2.5.16
日期：2017-03-27 02:46:02，版本：2.2.6

1
npm i -D vue-template-compiler

8、vue-hot-reload-api
Hot reload API for Vue components. This is what vue-loader and vueify use under the hood.（作为 vue-loader 的依赖，不独立使用）
日期：2018-02-21 14:33:47，版本：2.3.0
日期：2017-02-26 03:16:23，版本：2.0.11

1
npm i -D vue-hot-reload-api

9、file-loader
Instructs webpack to emit the required object as file and to return its public URL
日期：2018-03-01 22:55:18，版本：1.1.11
日期：2017-02-25 01:05:55，版本：0.10.1

1
npm i -D file-loader

10、url-loader
Loads files as base64 encoded URL（内部使用了 file-loader，但是不依赖 file-loader）
日期：2018-03-03 08:14:57，版本：1.0.1
日期：2017-02-24 16:38:51，版本：0.5.8

1
npm i -D url-loader

1
2
3
4
5
6
7
8
9
10
var config = {
  module: {
    rules: [
      {
        test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
        loader: 'url-loader?limit=1024'
      }
    ]
  }
};

11、webpack-merge
webpack-merge provides a merge function that concatenates arrays and merges objects creating a new object.
日期：2018-02-22 21:16:16，版本：4.1.2
日期：2017-03-16 10:58:35，版本：4.1.0

1
npm i -D webpack-merge

1
2
3
4
var merge = require('webpack-merge');
var webpackBaseConfig = require('./webpack.config.js');
module.exports = merge(webpackBaseConfig, {
});

12、html-webpack-plugin
webpack-merge provides a merge function that concatenates arrays and merges objects creating a new object.
日期：2018-04-03 09:01:49，版本：3.2.0
日期：2017-01-29 13:48:20，版本：2.28.0

1
npm i -D html-webpack-plugin

1
2
3
4
5
6
7
8
9
10
11
var HtmlWebpackPlugin = require('html-webpack-plugin');
var config = {
  plugins: [
    // 提取模板，并保存入口 html 文件
    new HtmlWebpackPlugin({
      filename: '../index_prod.html',
      template: './index.ejs',
      inject: false
    })
  ]
};

13、vue-router
vue-router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze.
日期：2017-10-13 16:24:49，版本：3.0.1
日期：2017-03-29 08:00:05，版本：2.3.1

1
npm i -S vue-router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const Routers = [
  {
    path: '/index',
    component: (resolve) => require(['./views/index.vue'], resolve)
  },
  {
    path: '/about',
    component: (resolve) => require(['./views/about.vue'], resolve)
  },
  {
    path: '*',
    redirect: '/index'
  }
];

const router = new VueRouter({
  mode: 'history',
  routes: Routers
});

new Vue({
  el: '#app',
  router: router,
  render: h => h(App)
});

14、fastclick
解决移动端300ms延迟

1
npm i -S fastclick

安装路径

C:\Users\zero\AppData\Roaming\npm\node_modules

参考

1、包仓库