webpack2.0

今天学习了下webpack一下是个人对webpack的理解(个人见解,大腿勿喷）

GO!GO!GO

1、npm install webpack -g （全局安装webpack）

2、cd 到项目目录  然后 npm init

3、npm install webpack --save-dev（项目内安装webpack）

4、配置webpack.config.js文件 如下：

下面就是webpack2.0一个基本的配置（没图是真的丑(ಥ﹏ಥ)）

var Webpack = require("webpack");

module.exports = {

entry: ["./first.js"],

output: {

path: __dirname,

filename: "bundle.js"

},

module: {

rules: [

{

test: /\.css$/,

use: [

{

loader: 'style-loader'

},

{

loader: 'css-loader'

}

]

},

{

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

name: "img/[name].[hash:7].[ext]"

}

},

{

test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000

}

}

]

},

plugins:[

new webpack.optimize.UglifyJsPlugin()

]

}

webpack.config.js中包含了 entry,output,loader,plugins 四个主要部分：

entry:为程序主入口

output:打包完成后的文件放到什么地方

loader:编译器,处理非js文件 less转css sass转css es6转es5 等等.....

plugins:插件 提供更多的功能

1.entry 没什么好说的 -- 把你程序入口js文件放上去就ok

2.output 中的bundle为html引入的js，path就是打包完成存放的位置

3.loader 如下:

下面是 loader的常用配置:

一、css配置 cmd命令 npm install css-loader style-loader --save-dev

二、img配置 cmd命令 npm install url-loader –save-dev

三、压缩img cmd命令 npm install file-loader image-webpack-loader –save-dev

四、编译ES6语法 cmd命令 npm install babel-core babel-loader babel-preset-es2015 –save-dev

.......等等等等

4.plugins 使用时官方强制向 plugins 属性传入 new 实例 安装方法如上面的loader  cmd 命令 npm intall "插件名称" --save（不管安装的插件或者loader在package.json中都会有记录）

5.终于配置文件都完善好以后  cmd命令  webpack 完成打包。