今天学习了下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 完成打包。
网友评论