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

時間 2019-11-14

標籤高手之路深刻 webpack 教程系列配置文件 webpack.config.js config 詳解欄目 JavaScript 简体版

原文原文鏈接

[js高手之路]深刻淺出webpack教程系列索引目錄：css

接着上文，從新在webpack文件夾下面新建一個項目文件夾demo2，而後用npm init --yes初始化項目的package.json配置文件，而後安裝webpack( npm install webpack@3.5.6 --save-dev )，而後建立基本的項目文件夾結構，好了，咱們的又一個基本項目結構就搭建好了.html

第1、開始經過webpack.config.js文件配置咱們的webpack項目webpack

首先在項目文件夾demo2下面，新建一個webpack.config.js文件，這個webpack.config.js文件能夠簡化命令行操做，主要配置webpack的四大核心：entry(項目入口), output(輸出路徑) loaders(加載loader), and plugins(插件使用)，官網有詳細配置說明：https://webpack.js.org/concepts/. 那麼什麼是entry(入口)呢，就是項目運行時，第一個要被執行的文件，叫入口文件web

webpack.config.js 文件:npm

1 console.log( __dirname ); //D:\ghostWu\bak\webpack\demo2
2 module.exports = {
3     entry : './src/js/main.js', // 入口文件
4     output : {
5         //__dirname，就是當前webpack.config.js文件所在的絕對路徑
6         path : __dirname + '/dist', //輸出路徑，要用絕對路徑
7         filename : 'index.bundle.js' //打包以後輸出的文件名
8     }
9 };

配置文件寫好以後，執行webpack打包命令，就會去當前目錄下尋找webpack.config.js文件，把main.js文件打包到dist/index.bundle.js，若是main.js輸入如下代碼，再執行webpack打包一次json

1 function say(){
2     alert( 'ghostwu告訴你怎麼學習webpack' );
3 }
4 say();

而後在index.html文件經過<script src="./dist/index.bundle.js"></script>引入打包後的文件，那麼就會彈出say函數中的內容babel

第2、若是配置文件webpack.config.js被修改爲別的名字(如webpack.dev.config.js)，執行webpack打包命令，是不能正常打包的(命令行會提示，找不到配置文件)，因此須要在打包的時候，經過--config指定配置文件的名字（webpack --config webpack.dev.config.js）才能正常打包less

第3、經過package.json文件的script部分，簡化打包操做函數

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

"scripts": {

"d" : "webpack --config webpack.dev.config.js --progress --display-modules --colors --display-reasons"

d後面的命令若是看不懂，請移步這裏

而後在命令行下用 npm run d 這個快捷方式就能夠執行scripts添加的"d"項對應的命令