webpack 学习日记01

base on [email protected]

配置文件webpack.config.js

    在项目文件根目录下创建webpack.config.js;

        module.export={

            entry: string|Array //注意单入口和多入口文件；

            output:{path,filename}//__dirname 意为根目录；

            mode:'production|development' //声明开发模式；

            module:{ rules:[{

                 test:/reg/  //匹配规则 ，use:['xxx-loader','xxx-loader'] //注意loader之间的依赖关系

            }]}，

            plugins:[] //使用的插件，解决loader无法实现的其他事。

        }

使用html-webpack-plugin

         安装 npm i html-webpack-plugin -D；

         使用 var HtmlWebpackPlugin=require('html-webpack-plugin');

                 plugins:[new HtmlWebpackPlugin(

                                        template:'',//模板文件的路径

                                        filename: 'index.html',//指定生成的html文件名

                                        minify: {collapseWhitespace: true},//压缩文件中的空格等

                                        hash:true//t为了更好的 cache，可以在文件名后加个 hash。

                              )]

处理css文件及ExtractTextWebpackPlugin的使用

        安装：cnpm i style-loader css-loader -D

        使用：module:{rules:[{

                        test:/\.css$/ //匹配文件，use:['style-loader','css-loader]// style-loader在前

                   }]}

        ExtractTextWebpackPlugin

         plugins:[new ExtractTextWebpackPlugin()],

        module:{rules:[{

                        test:/\.css$/ //匹配文件，

                        use:ExtractTextWebpackPlugin.extract({

                                        fallback:'style-loader', use:['css-loader']

                                })

                   }]}

webpack-dev-server

   安装：cnpm i webpack-dev-server -g

              cnpm i webpack-dev-server -D

 devServer: {

    port: 9000, //自定义端口

    open: true //是否自动打开浏览器

  },