webpack 几个基本打包扩展项的安装命令

网速比较慢的童鞋，装包时请准备好花生瓜子

 

webpack 本身只能打包 JavaScript 模块，但是它可以通过拓展打包比如静态资源文件、less、sass、typescript 等，还可以通过 babel 将 es6 转成 es5。

 

webpack 安装：

npm install --global webpack webpack-cli

　　全局安装： npm install --global webpack 

　　本地安装： npm install --save-dev webpack 

　　检查安装： webpack --version 

安装的时候建议安装到项目目录里，避免因为文件迁移后 webpack 的版本不一致导致问题

 

打包命令：

npm run build

 

 

Loading CSS 安装：

npm install --save-dev style-loader css-loader

配置：

var path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.join(__dirname, './dist/'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: [ // 此处注意顺序问题
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
}

 

Loading Images 安装：

npm install --save-dev file-loader

配置：

module: {
  rules: [
    {
      test: /.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    },
    {
      test: /.(jpg|png|gif|svg)$/,
      use: [
        'file-loader'
      ]
    }
  ]
}

 

Loading Less 安装：（ 注意此项依赖 css-loader 和 style-loader ）

npm i -D less less-loader

配置：

module: {
  rules: [
    {
      test: /.less$/,
      use: [
        'style-loader',
        'css-loader',
        'less-loader'
      ]
    }
  ]
}

 

Babel 安装：

npm install --save-dev babel-loader babel-core babel-preset-env

配置：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/, 
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }
  ]
}

 

babel-polyfill 安装：

npm i -D babel-polyfill

配置：

entry: ['babel-polyfill', './src/main.js'],

 

babel-transform-runtime 安装：

npm install babel-plugin-transform-runtime --save-dev
npm install babel-runtime --save

配置：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          cacheDirectory: true, // 开启缓存
          presets: ['env'],
          plugins: ['transform-runtime']
        }
      }
    },
  ]
}

 

 

其实总结起来，就是打开官方文档，装包，配置，测试