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的寫法