webpack學(xué)習(xí)記錄

安裝webpack

全局安裝webpack：npm install webpack -g之后cd進(jìn)入項(xiàng)目文件夾，初始化：npm init ,再執(zhí)行一次本地安裝
安裝webpack：npm install webpack --save-dev

配置webpack

編寫webpack配置文件webpack.config.js

module.exports={
    entry : __dirname + "/src/js/index.js", //入口文件
    output : {
        path : __dirname + "/bulid/js", //出口文件夾位置
        filename : "index.js"， //出口文件
    }
}

這樣最基本的webpack配置就完成了，我們可以在src/js下寫兩個(gè)兩個(gè)js文件test下。

add.js

module.exports={
    add : function(a,b){
        return console.log(a + b);
    }
}

index.js

var add=require("./add");
add(2,4);

再控制臺(tái)敲入webpack回車這時(shí)在bulid/src下就生成了index.js
在index.html中引入，打開瀏覽器控制臺(tái)成功輸出6

使用webpck-dev-server

編寫webpack配置文件webpack.config.js

const path=require("path");
module.exports={
    entry : __dirname + "/src/js/index.js", //入口文件
    output : {
        path : __dirname + "/bulid/js", //出口文件夾位置
        filename : "index.js"， //出口文件
        public : "temp",//臨時(shí)目錄
    },
    devServer : {
        contentBase: path.resolve(__dirname,"./"),
        host : "localhost", //地址
        port : "8080", //端口
        compress : true, //壓縮代碼
    }
}

打包c(diǎn)ss

打包c(diǎn)ss需要css-loader和style-loader，可以直接上npmjs.org上查找，首先我們需要安裝這兩個(gè)依賴。npm install --save-dev css-loader style-loader 安裝成功后我們修改配置文件如下，這樣我們就可以在入口文件里require我們的css文件，運(yùn)行webpack會(huì)幫我們打包到j(luò)s文件里去

const path=require("path");
module.exports={
    entry : __dirname + "/src/js/index.js", //入口文件
    output : {
        path : __dirname + "/bulid/js", //出口文件夾位置
        filename : "index.js"， //出口文件
        public : "temp",//臨時(shí)目錄
    },
    devServer : {
        contentBase: path.resolve(__dirname,"./"),
        host : "localhost", //地址
        port : "8080", //端口
        compress : true, //壓縮代碼
    }，
    module:{
        rules:[
            {
                test: /\.css$/,
                use:["css-loader","style-loader"]
            }
        ]
    }
}

使用方法直接在入口文件里require或者使用es6語法,運(yùn)行指令webpack進(jìn)行打包就可以看到效果

import css from "./one.css"
或者
var css=require("./one.css");