webpack怎麼安裝和配置?

先全局安裝 :

npm i webpack webpack-cli -g

在工作檔案夾 初始化

npm init -y

會出現一個package.json檔案

在工作檔案夾 根目錄建立一個配置檔案 ,js格式

webpack.config.js

在配置檔案寫

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');  //自動引入插件
module.exports = {
mode:"development", //開發環境
//入口
entry:path.join(__dirname,'./src/main.js'),
 /*出口*/
    output:{
        path:path.join(__dirname,'./dist'),
        filename:"bundle.js"
    },
/*插件 是一 數組 裡面的插件都是構造函數 需要 */
    plugins:[
        new HtmlWebpackPlugin({
            template: path.join(__dirname,'./src/index.html'),
            filename: "index.html"
        })
    ],
//配置子產品
/**************************************************
    *子產品,把其他檔案格式的檔案 轉化成子產品,需要相應的loader
     * 不同的檔案 需要不同的 loader
     * css-loader 将css檔案轉為 子產品
     * style-loader 将css子產品插入網頁文檔中
     * loader執行順序是從右往左
    * *************************************************/
module:{
rules:[
        {test:/\.css$/,use['style-loader','css-loader']},
        {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
//配置圖檔支援
       {test:/\.(png|jpg|gif|webp|jpeg)$/,
                use:[{
                   loader:"url-loader",
                    options: {
                        limit: 1024,  
                      //圖檔小于 1K 才轉best64
                        // name:'[path][name]-[hash:5].[ext]'
                        name:'[name].[ext]'
                    },
//配置ES6轉ES5
        {test:/\.js$/,use:['babel-loader'],exclude:[/node_modules/,/dist/]}

  ]
 }
}           

下載下傳 插件 和 子產品 集合

npm i html-webpack-plugin -D

npm install sytyle-loader css-loader -D //css支援子產品

npm install less less-loader -D //less支援子產品

npm install url-loader file-loader -D //圖檔支援子產品

子產品需要在配置檔案webpack.config.js配置 具體在上面

圖檔子產品loader會把圖檔轉為best64的 ,如果圖檔很多很大,會很消耗記憶體 .是以在上面會有一個限制 limit :1024 ,

相容性處理

配置ES6轉ES5

npm install babel-core [email protected] babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0 -D

還有再配置一個檔案 .babelrc

{
  "presets": ["env","stage-0"],
  "plugins": ["transform-runtime"]
}           

我們要怎麼使用 呢?

熱更新需要下載下傳一個插件

npm install webpack-dev-server -D

現在在回去看看package.json檔案配置下

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --port 8888 --hot --open "
  },