webpack(2)--开发环境基本配置

webpack

1，打包样式资源
以css/less/sass结尾的就是样式资源
处理样式资源是通过loader进行处理
下载资源：
npm i style-loader -D //在html文件中生成style标签并将其插入head标签中
npm i css-loader -D //将打包后中的js文件中的样式资源，转化为css字符串
npm i less-loader -D //将less资源以commonjs格式压缩在打包后的js文件中
npm i sass-loader -D //将sass资源以commonjs格式压缩在打包后的js文件中

2，打包html资源
处理html文件打包，是通过插件来进行处理
下载资源：
npm i html-webpack-plugin -D

3，打包图片资源
处理图片资源是通过loader进行处理
npm i url-loader -D

4，打包其他资源
处理其他资源是通过loader进行处理
npm i file-loader -D

5，配置devServer本地服务器
在webpack.config.js 文件中的devServer下进行配置
作用：
devserver本地服务器是方便开发，使用gzip压缩，在内存中进行压缩文件，不会在项目中生成本地的代码，实现了自动打包的功能（修改代码后无需手动再次打包），也可以自动打开浏览器查看编译效果。
下载资源：
npm i webpack-dev-server -D

具体代码：

//利用node 中的模块获得绝对路径
const {resolve}=require('path');
const HtmlWebPackPlugin=require('html-webpack-plugin')

module.exports={
    entry:'./src/index.js',
    output:{
        //打包后的文件名
        filename:'built.js',
        //打包后文件的路径
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            //详细的loader配置,处理一种情况，就得添加一个相对应的对象
            {
                test:/\.css$/,
                //当需要依赖多个loader时使use数组，只需要使用一个时使用loader标签
                use:[
                    //创建一个style标签，将js中的样式资源插入并添加到head标签中
                    'style-loader',
                    //将css文件变成commonjs模块加载到js中，里面的内容是样式字符串
                    'css-loader'
                ]
            },
            {
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                //处理图片资源
                test:/\.(jpg|png|gif)$/,
                loader:'url-loader',
                options:{
                    //处理最小的图片资源的大小，小于8*1024 的图片资源不进行处理，将采用base64 处理

                    limit:8*1024,
                    //关闭es6模块化编写，webpack采用的是nodejs中的commonjs编写风格
                    esModule:false
                    
                }
            },
            {
                //处理html中的img链接图片,url-loader处理不了链接图片
                test:/\.html$/,
                loader:'html-loader'
            },
            {
                //处理其他资源，exclude表示除了这些资源之外的其他文件，include表示只处理这里面的文件
                exclude:/\.(html|js|less|jpg|png|gif)$/,
                loader:'file-loader'
            }
        ]
    },
    plugins:[
        //插件配置
        new HtmlWebPackPlugin({
           //打包html文件，并以template下的html文件为模板生成一个引入了打包后的js文件的html文件
            template:'./src/index.html'
        })
    ],
    devServer:{
    //指定项目打包后的文件目录
        contentBase:resolve(__dirname,'build'),
        compress:true,
        //端口号
        port:3000,
        //自动打开浏览器
        open:true
    },
    //指示打包为开发环境打包
    mode:'development'
}