webpack的基本用法

1、webpack webpack-cli webpack-dev-server

1. 基本包

webpack 中的自带的 热更新

webpack.HotModuleReplacementPlugin()

 plugins: [
   new webpack.HotModuleReplacementPlugin(),
  ]
    
复制代码

2 、html-webpack 模块是打包html的 几个参数

    
复制代码

3,关于css的 没有抽离的简单版

.安装命令

 npm install style-loader css-loader less less-loader 
 //第一版，没有抽的css
 module: {
        rules: [
            {
                test: /\.css$/, use: [
                   "style-loader","css-loader"
                ]
            },
            {
                test: /\.less$/, use: [
                    'style-loader',"css-loader","less-loader"
                ]
            }
        ]
    },
复制代码

4、样式抽离

5、jsx 并且支持es7的箭头函数 ps:一定要加@next

extract-text-webpack-plugin@next

6 html-withimg-loader html的图片

     {
                test:/\.html/,
                use:"html-withimg-loader"
            },
复制代码

//完整写法

module:{
    rules:[
        {
            test:/\.html/,
            use:"html-withing-loader"
        }
    ]
}
复制代码

支持jsx的写法