webpack2-1 安裝與打包+配置默認webpack+url-loader css-loader+生成模板與刪除再生成+webpack-dev-server+開發版本與線上版本 + npm上傳

webpack核心是模塊打包工具

npm install webpack-cli --save-dev  安裝腳手架
npx webpack index.js      // 進行壓縮翻譯

const path=require('path');
module.exports={
    entry:'./src/index.js',  //從index.js開始打包
    module:{
        rules:[
            {
                test:/\.png$/,   // 安裝插件 用於打包特殊文件
                use:{
                    loader:'file-loader'
                }
            }
        ]
    },
    output:{
        // publicPath:"http://cdn.com.cn",   // 可以加入地址 比如變爲www.baidu.com/dist.js
        filename:'bundle.js',    //  生成的名字
        path:path.resolve(__dirname,'dist')   // 打包的目錄
    }
}

// npx webpack --config webpackconfig.js 修改默認的webpack文件

// 在package.json 中      
// "scripts": {
//     "bundle":"webpack"
// }   可以吧npx webpack 改成npm run bundle 執行npx webpack

            {
                test:/\.(png|jpg|gif)$/,   // 安裝插件 用於打包特殊文件
                use:{
                    loader:'url-loader',       // 改成url-loader
                    options:{                 //  placeholder 佔位符 
                        name:'[name].[ext]',  //打包文件名
                        outputPath:'images/',    // 打包至
                        limit:204800                // 小於xxx 變爲base64 否則打包至images中
                    }
                }
            },
            {
                test:/\.css$/,     
                use:['style-loader',
                        {             // 如果要自定義
                            loader:"css-loader",
                            options:{
                                importLoaders:2 ,   // 只要要走幾個loader  默認從下島上 從右到左
                                modules:true,       // 模塊化引入
                            }
                        }
                ]     // 用這兩個打包css樣式  
            }

const HtmlWebpackPlugin=require('html-webpack-plugin');   //在打包結束後自動生成html 將js引入到html中
const { CleanWebpackPlugin } = require("clean-webpack-plugin");  // 刪除指定目錄


    plugins:[
        new HtmlWebpackPlugin({
            template:'src/index.html'      // 設置生成的模板
        }),
        new CleanWebpackPlugin()
    ],   // 刪除dist內容

// 在package.json 中配置    監聽改變和 npm run start中用webpack-dev-server
  "scripts": {
    "watch": "webpack --watch",
    "start": "webpack-dev-server"
  },
// 用devserver 實現自動打開瀏覽器和實時改變
    devServer:{
        contentBase:'./dist',
        open:true,
        proxy:{      // 代理請求  /api/users http://localhost:3000/api/users
            '/api':'http://localhost:3000'
        }
    },

  "scripts": {    // 在package.json 中配置
    "dev": "webpack-dev-server --config webpack.dev.js",
    "build": "webpack-dev-server --config webpack.prod.js"
  },

    mode:"production",
    entry:"./src/index.js",
    externals: " lodash",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:'library.js',
        libraryTarget:'umd',    // 可以任意引入
        library:'library'       // 全局變量
    }

    在webpack中配置 
    npm adduser  npm publish    //  然後上傳到npm包中

58 結束