Webpack入门指南-优快云博客

webpack的使用。

一。安装

npm install --save-dev webpack (本地安装)
npm install --global webpack （全局）

二。创建项目。

mkdir webpack-demo && cd webpack-demo 
npm init -y
npm install --save-dev webpack （在当前项目中安装webpack）
npm install webpack-cli -D

三。创建对应文件：webpack.config.js, index.js, index.html, dist文件夹(打包后的文件), src文件夹(需要打包的文件)。现在需要打包的是index.js,则把index.js放入src中。

四。加载不同的文件。

npm install --save-dev style-loader css-loader （加载css）
npm install --save-dev file-loader （加载图片）
npm install --save-dev csv-loader xml-loader （CSV、TSV 和 XML）

js和json文件可以直接加载。

五。webpack.config.js

使用的插件：

npm install --save-dev html-webpack-plugin （生成HTML文件）
npm install clean-webpack-plugin --save-dev （清理指定的文件夹）

module.export = {
  entry: './src/index.js',  => 单文件人口；
  //entry: {
  //     a: './src/a.js',
  //     b: './src/b.js'
  //     }
  plugins:{
           new  clearWebpackPlugin(['dist'])  // 清除指定文件夹
           new htmlWebpackPlugin({           // 生成HTML文件。
               title: 'output message'
           })
  },
  output: {
          filename: '[name].bundle.js',
          path: resolve(_dirname,'dist')
   },
 module: {
     rules: [
       {
         test: /\.css$/,
         use: [
           'style-loader',
           'css-loader'
         ]
       },
       {
         test: /\.(png|svg|jpg|gif)$/,
         use: [
           'file-loader'
         ]
       },
       {
         test: /\.(woff|woff2|eot|ttf|otf)$/,
         use: [
           'file-loader'
         ]
       },
       {
         test: /\.(csv|tsv)$/,
         use: [
           'csv-loader'
         ]
       },
       {
         test: /\.xml$/,
         use: [
           'xml-loader'
         ]
       }
     ]
   }
}

webpack的深入理解请参考官方文档：官方文档地址。