webpack使用--loader和插件

css处理

• css-loader 处理css中路径引用等问题
• style-loader 动态把样式写入html
• sass-loader scss编译器
• less-loader less编译器
• postcss-loader css再处理，可以实现css自动补全等功能，但要安装相应的插件和进行相应的配置

module.exports={
    entry:'./index.js',
    output:{
        path:__dirname+'/dist',
        filename:'bundle.js'
    },
    module:{
        loaders:[
            {
                test:/\.css$/,
                loaders:'style-loader!css-loader'
            },
            {
                test:/\.less$/,
                loaders:'style-loader!css-loader!less-loader'
            },
            {
                test:/\.scss$/,
                loaders:'style-loader!css-loader!sass-loader'
            }
        ]
    }
}

注意！less-loader加载器里的index.js有一句 var less = require(“less”);
说明, 你必须要安装less插件。npm install less –save-dev

js处理

• babel-loader
• jsx-loader

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

{
    test:/\.js$/,
    loaders:'babel-loader?presets[]=es2015',
    exclude:/node_modules/
}

图片处理

npm install –save-dev url-loader

{
    test:/\.(jpg|png)$/,
    loaders:'url-loader?limit=8192'
}

自动生成html插件

html-webpack-plugin，可以在dist/目录下生成index.html文件

cnpm install html-webpack-plugin --save-dev


var htmlwebpackplugin=require('html-webpack-plugin');
var htmlwebpackplugin=require('html-webpack-plugin');
module.exports={
    entry:'./index.js',
    output:{
        path:__dirname+'/dist',
        filename:'bundle.js'
    },
    module:{
        loaders:[
        ]
    },
    plugins:[
        new htmlwebpackplugin({
            title:'app',
            filename:'index2.html',
            favicon:'1.png',
            hash:true
        })
    ]
}

可以进行配置：
title: 设置title的名字
filename: 设置这个html的文件名
template:要使用的模块的路径
inject: 把模板注入到哪个标签后
favicon: 给html添加一个favicon

提取样式插件

extract-text-webpack-plugin，把css提取到一个文件中

npm install --save-dev extract-text-webpack-plugin

var plugin=require('extract-text-webpack-plugin');
module:{
        loaders:[
            {
                test:/\.css$/,
                loaders:plugin.extract({fallback:'style-loader',use:'css-loader'})
            }
        ]
    },
    plugins:[
        new plugin('1.css'),
    ]

自动补全css3前缀插件

cnpm install –save-dev autoprefixer postcss-loader
autoprefixer是postcss-loader的插件之一。

{
test:/\.css$/,
loaders:["style-loader", "css-loader","postcss-loader"]
}

同级目录新建postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')({browsers:'last 5 version'})
  ]
}

webpack提供了很多有用的原生插件。
UglifyJsPlugin解析/压缩/美化所有的js chunk。通过设置except数组来防止指定变量被改变。

new webpack.optimize.UglifyJsPlugin({
    mangle: {
        except: ['$super', '$', 'exports', 'require']
    }
})

使用jquery

ProvidePlugin，定义标识符，当遇到指定标识符的时候，自动加载模块。

npm install --save-dev jquery

var webpack=require('webpack');
//引入本地jquery，配置别名，用webpack.ProvidePlugin将jquery在全局引入。这样就不用每个文件都require(jquery)
resolve: { alias: { jquery: "./jquery-3.2.0.min.js" } }, 
plugins:[
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery"
    })
]

注意：$只在js模块中可以用，在html文件中没有引入jquery，不能用。

webpack-dev-server和webpack-dev-middleware

webpack-dev-server：
它是一个静态资源服务器，只用于开发环境；是一个小型Express服务器，webpack-dev-server会把编译后的静态文件全部保存在内存里；

webpack-dev-middleware：
是一个处理静态资源的middleware；

webpack-hot-middleware：
是一个结合webpack-dev-middleware使用的middleware，它可以实现浏览器的无刷新更新（hot reload），这也是webpack文档里常说的HMR（Hot Module Replacement）。

webpack-dev-server就是一个Express 和 webpack-dev-middleware的实现，两者之间的区别是webpack-dev-server 是封装好了的, 除了config 和命令行参数之外很难再做定制型的开发，所以它适合纯前端的辅助工具。而webpack-dev-middleware是一个中间件, 可以编写自己的后端服务, 然后整合进来.

#

待续