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']
        }
    }
}