webpack （附：开发模式---最终版）

开发环境:

　　mode:development

　　安装包的时候使用npm i xx -D

　　安装完成之后会在package.json中的devDependencies

　　使用的一些构建工具比如glup、webpack这些只是在开发中使用的包，

　　上线以后就和他们没关系了，所以将它写入devDependencies

生产环境:

　　mode:production

　　安装包的时候使用npm i xx -S

　　安装完成之后会在package.json中的dependencies

　　比如我们写一个项目要依赖于jQuery，没有这个包的依赖运行就会报错，

　　这时候就把这个依赖写入dependencies

卸载:

　　npm uninstall xxx

只要是在开发中，都要使用devserver

　　1.安装webpack-dev-server

　　2.配置devserver

通过使用不同的Loader，Webpack可以要把不同的文件都转成JS文件,

比如CSS、ES6/7、JSX等。

test：匹配处理文件的扩展名的正则表达式 /.css$/ /.js$/ /.less$/...

use：loader名称，就是你要使用模块的名称

include/exclude:手动指定必须处理的文件夹或屏蔽不需要处理的文件夹

query：为loaders提供额外的设置选项

热更新:

　　1.devServer下设置hot为true

　　2.引入webpack

　　3.到plugins下 new webpack.HotModuleReplacementPlugin()

　　4.在入口文件中写

　　　　if(module.hot){

　　　　　　module.hot.accept()

　　　　}

 

开盖即食：

　　生产模式--最终版 2018-12-30

//生产模式--最终版
/*
1.清缓存：npm cache clean -f
2.安装：npm i webpack webpack-cli css-loader clean-webpack-plugin html-webpack-plugin -D
    npm i mini-css-extract-plugin url-loader file-loader optimize-css-assets-webpack-plugin html-withimg-loader -D

*/
const path = require('path');
const CWP = require('clean-webpack-plugin');
const HWP = require('html-webpack-plugin');
const MCEP = require('mini-css-extract-plugin');
const OCAWP = require('optimize-css-assets-webpack-plugin');

const obj = {
    mode:'production',//development 开发模式   、production 生产模式
    entry:{ // 入口
        app:'./app.js',
    },
    output:{ // 出口
        path:path.resolve(__dirname,'build'),
        filename:'./js/[name].js',
    },
    module:{ // 模块
        rules:[ // 规则
            {
                test:/.css$/,
                use:[
                    {
                        loader:MCEP.loader
                    },
                    'css-loader'
                ]
            },
            {
                test:/.(jpg|png|gif|svg|bmp)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:4096,
                            outputPath:'./images',//单独的创建一个文件夹，它的路径基于出口路径（build/js）
                            publicPath:'../images',//引入的路径
                        }
                    }
                ]
            },
            {
                test:/.html$/,
                use:'html-withimg-loader'
            }
        ]
    },
    plugins:[ // 插件
        new OCAWP(),
        new CWP(['build']),
        new HWP({
            template:'./index.html',
            //filename:'../index.html',//把html和css放在同级，就可以解决手动修改路径的问题。（../css/index.html）
            minify:{
                removeAttributeQuotes:true,
                collapseWhitespace:true,
            }
        }),
        new MCEP({
            filename:'./css[name].css'
        }),
    ]
};
module.exports = obj;

/*
手动修改路径：ctrl+F  统一改一下路径，就可以了。（比如：images/...  ->  ./images/...  ->  ../images/...）
*/

/*
entry  入口：
    字符串、数组、对象
output  出口：
    字符串、对象
module
    rules：[{
        rest:/.css$/,
        use:['style-loader','css-loader']
        use:'css-loader'
        use:[{
            loader;mxx.loader
            options:{
                limit:32131
            }
        },'css-loader']
    }]
piugins:[1,2]
devServer:{  // 配置
    hotLtrue,
    open:true,
    contentBase:path.resolve(__dirname,'build'),
    host:'localhost',
    port:80
}
*/

//import+css 路径，引入css

 例子：

const path = require('path');
const HWP = require('html-webpack-plugin');
const CWP = require('clean-webpack-plugin');
const webpack = require('webpack'); //1.5

const obj = { 
    mode:'production', //development
    entry:{
        index:'./aaa.js',
        // index2:'./2.js'
    },
    output:{
        path:path.resolve(__dirname,'build'),
        filename:'[name].[hash:6].js'
    },
    module:{
        rules:[
            {
                test:/.css$/,
                //先放style-loader，再放css-loader
                use:['style-loader','css-loader'],
            }
        ]
    },

    plugins:[
        new CWP(['build']),//清除多余js文件，必须放在html的上面
        new HWP({
            template:'./index.html',
            // inject:false    //不放script标签
            // inject:'head'   //把script放到head中
            minify:{
                removeAttributeQuotes:true,//清除属性的引号
                collapseWhitespace:true //把html压缩成一行
            },
            hash:true,//给js文件加?dsua89a
            chunks:['index','index2'],
            title:'世界你好'
        }),
        new webpack.HotModuleReplacementPlugin()//1.8
    ],
    devServer:{
        // contentBase:path.resolve(__dirname,'build'),// 配置开发服务运行时的文件根目录
        host:'localhost',// 开发服务器监听的主机地址
        compress:true,   // 开发服务器是否启动gzip等压缩
        port:80,
        open: true,//自动打开网页
        hot: true //1   
    }
}
module.exports = obj;