webpack的使用（一）

entry與output

//直接給出entry與output
webpack ./src/.main.js ./dist/bundle.js

配置文件：webpack.config.js

const path = require('path'); //使用Node模塊需要事先npm init，生成package.json

module.exports = {
	entry:'./src/main/js',
	output:{
		path:path.resolve(__dirname,'dist'),
		filename:'bundle.js'
	}
}

之後就可以直接通過 webpack 命令進行打包。

但是一般來說，全局webpack並不常用，項目開發一般使用的是項目內的webpack，使用如下命令安裝項目內的webpack：

npm install webpack@3.6.0 --save-dev //安裝時可以指定版本，--save-dev命令表明webpack爲開發時依賴

/*
--save : 將保存配置信息到pacjage.json。默認爲dependencies節點中。
		 該節點指定運行時的依賴，即發佈後生產環境下還需要用的模塊。
--dev：將保存配置信息到devDependencies節點中。 
		 該節點指定開發時的依賴。裏面的模塊是開發時用的，發佈時用不到它。
因此模塊在發佈後仍需要使用的話就用 --save，發佈後不再使用就用 --save-dev
 */

之後我們可以用另一種命令來進行打包，該命令需要事先在package.json文件中做一些更改：

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    "build": "webpack" //在scripts中新增這條命令
  },
  "author": "",
  "license": "ISC"
}

之後可以通過使用如下命令對項目進行打包：

npm run build //該命令會做一個替換，即build映射向webpack，因此實際上執行命令的仍然是webpack，
			  //但是npm run這種形式會優先使用項目中的webpack
			  //直接在控制檯使用webpack默認會使用全局的webpack

loader

webpack自身只理解js代碼，因此只能打包js文件並處理相關依賴，若要處理其它類型的文件與依賴，如css、圖片、less等，或是把ES6、TypeScript代碼轉爲ES5，將scss、less轉換爲css，將.jsx、.vue轉換爲js等，還需要對webpack進行拓展，這將藉助於loader。

loader的使用步驟：

#1 下載安裝所需的loader
#2 在webpack的配置文件中配置loader

對css文件的配置：

npm install --svae-dev css-loader //安裝css-loader（該loader加載css文件）
npm install --svae-dev css-loader //安裝style-loader （該loader解析css並把它放進DOM中）

module.exports = {
	entry:'./src/bbb.js',
	output:{
		path:path.resolve(__dirname,'dist'),
		filename:'bundle.js'
	},
	module:{
		rules:[
			{
				test:/\.css$/,  //正則表達式
				use:['style-loader','css-loader'] //use參數使用loader的順序是從右向左
			}
		]
	}
}

對less文件的配置：

npm install --save-dev less-loader less  

module.exports =  {
	...
	module:{
		rules:[{
			test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
		}]
	}
}

圖片文件的配置：

npm install --save-dev url-loader

module.exports = {
	...
	module:{
		rules:[{
			test:/\.(jpg|png|gif|jpeg)$/,
			use:[{
				loader:'url-loader',
				options:{
					//當圖片大小小於limit時，圖片會編譯成Base64字符串格式，不需要再打包
					//否則需要使用安裝file-loader，並且需要打包
					//打包大於limit圖片時還需要在config.js配置文件下的output選項添加
					//publicPath:'dist/' 來處理圖片的url路徑問題
					limit:8192
					name:'img/[name].[hash:8].[ext]' //對打包的圖片進行命名
				}
			}]
		}]
	}
}

ES6轉ES5：

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

{
	test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['es2015']
        }
    }
}