[webpack]各种loader的安装和使用

npm i html-webpack-plugin -D

npm i style-loader csss-loader -D

npm install url-loader -D 

npm install vue-loader vue-template-compiler  //这是vue组件的loader

安装JQuery：

先安装加载器expose-loader，用于将插件暴露到全局中供其他模块使用:

npm i expose-loader -D

npm i jquery -D

css文件和js文件分离

npm i extract-text-webpack-plugin@next -D

备注：上面的i其实就是install；-D其实相当于--save-dev；如果想下载快点可以使用国内的镜像，后面加上--registry=https://registry.npm.taobao.org

const path = require('path');

const htmlWebpackPlugin = require('html-webpack-plugin');//生成html

const Ex= require('extract-text-webpack-plugin');//独立生成css

const VueLoaderPlugin = require('vue-loader/lib/plugin'); //Vue-loader在15.*之后的版本的使用都是需要伴随 VueLoaderPlugin的

module.exports = {

    mode:"development",

    entry :{

        app:path.join(__dirname,'../src/js/main.js'),//js文件源

    },

    output:{

        filename:'js/[name].[hash].js',//输出的js文件路径

        path:path.join(__dirname,'../dist'),//输出的目录

    },

    plugins: [

        new htmlWebpackPlugin({

            filename:'index.html',

            template: path.join(__dirname, '../src/index.html'),//生成html的模板来源

            inject:'head',//插入文件方式inject:true就是css放头部，js放底部

            title:'you title',//可以在html插入一些自定义的标签

            DIYdata:'you DIYdata',

        })

        ,

        new htmlWebpackPlugin({//多个html文件

            filename:'test.html',

            template: path.join(__dirname, '../src/test.html'),//多个HTML文件模板

            inject:'head',

        }),

        new Ex("css/[name][hash].css") //指定文件名称生成css

      ，

       new VueLoaderPlugin()  //vue-loader的plugin

    ],

    module: {

        rules: [

            {

                test:/\.css$/,

                //loader:['style-loader','css-loader'],//处理css文件

                use:Ex.extract({//让css文件以独立文件加载

                    use: ['css-loader']

                })

            },

           {

               test:/\.vue$/,

               loader:['vue-loader'],

          },

    　　{

    　　　　test: /\.(png|jpg|gif)$/,//处理图片文件

    　　　　loader: 'url-loader'

    　　},

            //暴露$和jQuery到全局

            {

                test: require.resolve('jquery'), //require.resolve 用来获取模块的绝对路径

                use: [{

                    loader: 'expose-loader',

                    options: 'jQuery'

                }, {

                    loader: 'expose-loader',

                    options: '$'

                }]

            }

        ]

    }

}