目錄

webpack是什麼?

webpack配置步驟

安裝loader

安裝外掛  

打包

webpack是什麼?

 在webpack的世界裡,每個檔案都是一個模組,比如.css、.js、.html等。對於不同的模組，則需要不同的載入器(Loaders)來處理。

提示:下面的操作都預設你安裝了node.js，如果沒有請看 node.js安裝步驟

webpack配置步驟

1.建立一個目錄 比如 demo

使用 NPM初始化

$ npm init

2. 本地區域性安裝 webpack與webpack-dev-server

$ npm install webpack --save-dev

**: --save-dev 會作為開發依賴來安裝

$ npm install webpack-dev-server --save-dev

如果你的 package.json 的devDependencies包含 webpack和server則表示安裝成功。如果你的webpack版本大於4.0.0 則需要安裝webpack-cli 最後目錄如下:

     "devDependencies": {
        "webpack": "^4.21.0",
        "webpack-cli": "^3.1.2",
        "webpack-dev-server": "^3.1.9"
      }
 

3.在 demo目錄裡  建立 webpack.config.js
4. 開啟 package.json 在"scripts" 加入一個服務指令碼

 "dev":"webpack-dev-server --open --config webpack.config.js"

**: --open 表示會自動開啟瀏覽器 --config是 則會直接讀取webpack.config.js檔案
5. 在demo目錄下 建立 main.js,並開啟 webpack.config.js進行如下配置:

    var path=require('path');

    var config={
        entry:{
            main:'./main'
        },
        output:{
            path:path.join(__dirname,'./dist'),
            publicPath:'/dist/',
            filename:'main.js'
        }
    };
    module.exports=config;
 

6. 在demo目錄下 建立 index.html

    <div id="app">
        你好! 世界
    </div>
    <script src="/dist/main.js"></script>

7.啟動webpack

   $ npm run dev

安裝loader

1.安裝css處理的載入器

 $ npm install css-loader style-loader --save-dev

2. 開啟webpack配置檔案,新增如下內容

        module:{
            rules:[
                {
                    test:/\.css$/,
                    use:["style-loader","css-loader"]
                }
            ]
        }

 **: module物件的 rules屬性可以指定一系列的Loaders。每一個loader都必須包含test和use兩個選項

3.在專案根目錄 建立 style.css檔案

#app{
	font-size: 20px;
	color:orange;
}

4.引入main.js

import './style.css';

 5. 重新啟動服務

$ npm run dev

安裝外掛  

有時候因為css檔案內容太多,都引入js檔案裡太佔體積，而且不能做快取，此時我們就需要用外掛來將散落的css提取到一個main.css檔案裡，最終將該檔案匯入index.html中

1. 安裝 extract-text-webpack.plugin
        提示: 如果webpack版本大於4.0.0則需要@next

    $ npm install [email protected] --save-dev

2. 開啟webpack配置檔案,配置如下:

var path=require('path');
var ExtractTextPlugin=require('extract-text-webpack-plugin');
var config={
	entry:{
		main:'./main'
	},
	output:{
		path:path.join(__dirname,'./dist'),
		publicPath:'/dist/',
		filename:'main.js'
	},
	module:{
		rules:[
			{
				test:/\.css$/,
				use:ExtractTextPlugin.extract({
					use:'css-loader',
					fallback:'style-loader'
				})
			}
		]
	},
	plugins:[
		//重新命名提取後的css檔案
		new ExtractTextPlugin('main.css')
	]
};
module.exports=config;

 3. 重新啟動服務

$ npm run dev

打包

   1.在 package.json中“”scripts” 新增如下內容:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --config webpack.config.js",
    "build": "webpack"
  },

2. 打包 

$ npm run build 

如果想了解es6語法轉換點選這裡:es6語法轉es5

後面關於vue-cli的相關配置還會更新...