[js高手之路]深入淺出webpack教程系列2-配置文件webpack.config.js詳解(上

moven_j 發(fā)布于2019-08-21 16:27 / 882人閱讀

摘要：接著上文，重新在文件夾下面新建一個(gè)項(xiàng)目文件夾，然后用初始化項(xiàng)目的配置文件，然后安裝，然后創(chuàng)建基本的項(xiàng)目文件夾結(jié)構(gòu)，好了，我們的又一個(gè)基本項(xiàng)目結(jié)構(gòu)就搭建好了第一開始通過文件配置我們的項(xiàng)目首先在項(xiàng)目文件夾下面，新建一個(gè)文件，這個(gè)文件可

接著上文，重新在webpack文件夾下面新建一個(gè)項(xiàng)目文件夾demo2，然后用npm init --yes初始化項(xiàng)目的package.json配置文件，然后安裝webpack( npm install webpack@3.5.6 --save-dev )，然后創(chuàng)建基本的項(xiàng)目文件夾結(jié)構(gòu)，好了，我們的又一個(gè)基本項(xiàng)目結(jié)構(gòu)就搭建好了.

第一、開始通過webpack.config.js文件配置我們的webpack項(xiàng)目

首先在項(xiàng)目文件夾demo2下面，新建一個(gè)webpack.config.js文件，這個(gè)webpack.config.js文件可以簡(jiǎn)化命令行操作，主要配置webpack的四大核心：entry(項(xiàng)目入口), output(輸出路徑) loaders(加載loader), and plugins(插件使用)，官網(wǎng)有詳細(xì)配置說明：https://webpack.js.org/concep... 那么什么是entry(入口)呢，就是項(xiàng)目運(yùn)行時(shí)，第一個(gè)要被執(zhí)行的文件，叫入口文件

webpack.config.js 文件:

console.log( __dirname ); //D:ghostWuakwebpackdemo2
module.exports = {
    entry : "./src/js/main.js", // 入口文件
    output : {
        //__dirname，就是當(dāng)前webpack.config.js文件所在的絕對(duì)路徑
        path : __dirname + "/dist", //輸出路徑，要用絕對(duì)路徑
        filename : "index.bundle.js" //打包之后輸出的文件名
    }
};

配置文件寫好之后，執(zhí)行webpack打包命令，就會(huì)去當(dāng)前目錄下尋找webpack.config.js文件，把main.js文件打包到dist/index.bundle.js，如果main.js輸入以下代碼，再執(zhí)行webpack打包一次

1 function say(){
2     alert( "ghostwu告訴你怎么學(xué)習(xí)webpack" );
3 }
4 say();

然后在index.html文件通過引入打包后的文件，那么就會(huì)彈出say函數(shù)中的內(nèi)容

第二、如果配置文件webpack.config.js被修改成別的名字(如webpack.dev.config.js)，執(zhí)行webpack打包命令，是不能正常打包的(命令行會(huì)提示，找不到配置文件)，所以需要在打包的時(shí)候，通過--config指定配置文件的名字（webpack --config webpack.dev.config.js）才能正常打包

第三、通過package.json文件的script部分，簡(jiǎn)化打包操作

把package.json文件的scripts部分修改成：

"scripts": {
"d" : "webpack --config webpack.dev.config.js --progress --display-modules --colors --display-reasons"
},
d后面的命令如果看不懂，請(qǐng)移步這里
然后在命令行下用 npm run d 這個(gè)快捷方式就可以執(zhí)行scripts添加的"d"項(xiàng)對(duì)應(yīng)的命令