webpack特点
- webpack本质上是nodejs的一个包，所以webpack是基于node.exe来运行的
- 想要运行webpack就必须要安装node.exe
- webpakc是在开发阶段要被程序员使用的，但是在生成环节中是用不到的(生产环节已经打包压缩好了)
如何安装webpack
- 安装node.exe的同事会自动安装好npm 包管理工具
- npm 包这个管理器下载的包是来源于国外，所以速度回很慢，甚至出错
所以我们使用国内taobao开发的一个cnpm来替代npm的使用
使用webpack之前的准备工作
- 安装node环境
- npm install cnpm -g 将cnpm全局安装(使任何地方都可以使用)
- cnpm install webpack -g 将webpack安装成为全局包
- cnpm install webpack --save-dev 当前项目根目录安装webpack,给当前项目使用
- npm init -y 当前项目根目录初始化npm,会有package.json
- 如果运行 webpack 执行webpack.config.js
- 如果要执行webpack.develop.config.js,就运行webpack --config
webpack.develop.config.js,当然也可以在package.json中设置
{
"name": "01webpack",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
//可以直接命令运行npm run develop 来执行webpack.develop.config.js文件
"develop": "webpack --config webpack.develop.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-loader": "^7.1.0",
"less": "^2.7.2",
"less-loader": "^4.0.4",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0"
}
}
学习nodejs的模块化开发(main.js依赖calc.js写法）
1、在nodejs中一切.js文件都可以是一个模块
2、calc.js
function add(x,y){return x + y;}
module.exports = add;
3、main.js使用calc.js中的add方法
导calc.js模块
// webpack的入口文件
var add = require('./calc.js');
// console.log(add(2,3));
// 获取到页面上面所有dom对象
var v1obj = document.getElementById('v1');
var v2obj = document.getElementById('v2');
var btobj = document.getElementById('bt');
var resobj = document.getElementById('res');
btobj.onclick = function(){
// 实现一个加法功能
var v1Val = (v1obj.value - 0);
var v2Val = (v2obj.value - 0);
resobj.value = add(v1Val,v2Val);
}
webpack的基本使用方式
- 第一种使用方式：webpack 入口文件.js的路径 输出文件.js的路径
在当前要打包的入口.js文件的位置打开cmd ，输入 webpack 入口文件.js 输出文件.js
- 第二种使用方式：webpack 结合 webpack.config.js 配置文件进行打包
目的：在cmd面板中直接利用 webpack指令即可进行打包，
特点：如果直接指向 webpack 指令，webpack指令会自动去查找当前目录下的webpack.config.js文件
编写步骤：
1、webpack.config.js中定义入口文件和输出文件的 内容
module.exports={
entry:path.resolve(__dirname,'src/main.js'), ---main.js的路径
output: {
path: path.resolve(__dirname, 'dist'), ---自己创建的dist文件夹,用来放bundle.js
filename: 'bundle.js',
},
2、在与webpack.config.js文件相同的目录下打开cmd，执行webpack即可完成打包
利用webpack完成 css文件的打包
-
利用webpack完成 css文件的打包
注意点：webpack是利用style-loader和css-loader这两个nodejs的包来完成.css文件的打包工作
步骤：
1、cnpm i style-loader css-loader 安装本地包
style-loader与css-loader会依赖于其他的很多包，所以一般我们在将这个项目文件发送给其他人使用的时候，是要删除 node_modeuls这个文件夹的，这时候就有可能不知道这个项目中依赖于哪些第三方包解决方案： node.exe中提供了一个 package.json文件用来存放当前安装的所有包， 这些包分为： 1、开发阶段使用的包 cnpm i 包名称 --save-dev --save-dev对应的是package.json devDependencies节点 2、生产环境阶段使用的包 cnpm i 包名称 --save --save对应的是package.json dependencies节点 保存的步骤： 1、利用 cnpm init 来生成一个 package.json文件 2、cnpm i style-loader css-loader --save-dev 2、将style-loader与css-loader配置在 webpack.config.js中，webpack才能使用这两个loader文件 webpack.config.js中定义入口文件和输出文件的 内容(见最后webpack.config.js的配置)
利用webpack完成 sass文件的打包
步骤：
1、cnpm install sass-loader node-sass --save-dev
2、sass-loader 在webpack.config.js中增加一个 loader节点
注意点： sass文件的打包依赖于 sass-loader 解析成原生的 .css语法
所以要最终打包成功就必须要依赖于style-loader css-loader
所以在配置 sass的时候，
style-loader!css-loade!sass-loader
{
test:/\.scss$/, //表示当前要打包的文件的后缀正则表达式
loader:'style-loader!css-loader!sass-loader' //实现sass文件的打包
}
利用webpack完成 less文件的打包
步骤：
1、cnpm install less-loader less --save-dev
2、less-loader 在webpack.config.js中增加一个 loader节点
注意点： 在配置 loader:'' 对应的loader的时候，要
按照 style-loader!css-loade!less-loader 配置
利用webpack完成 url()导入资源文件的打包
例如需求：
background-image: url(../imgs/home.png)
那么webpack必须利用 url-loader 这个包去解析，而url-loader依赖file-loader，所以
步骤：
1、npm i url-loader file-loader --save-dev
2、url-loader在webpack.config.js中增加一个 loader节点
利用webpack完成 es6转es5
步骤：
1、npm install babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime --save-dev
注意：babel-plugin-transform-runtime 安装是为了在后面能够正常编译.vue这个文件不出错
main.js配置
// webpack的入口文件
// 在此处main.js实现的是获取到dom对象，实现一个加法功能
var add = require('./calc.js');
// 导入site.css 以后webpack才能将site.css打包
require('./1.css');
require('./site1.scss');
require('./site2.less');
// console.log(add(2,3));
// 获取到页面上面所有dom对象
var v1obj = document.getElementById('v1');
var v2obj = document.getElementById('v2');
var btobj = document.getElementById('bt');
var resobj = document.getElementById('res');
btobj.onclick = function(){
// 实现一个加法功能
var v1Val = (v1obj.value - 0);
var v2Val = (v2obj.value - 0);
resobj.value = add(v1Val,v2Val);
}
webpack.config.js配置
var path = require('path');
module.exports = {
entry:path.resolve(__dirname,'src/main.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module:{
loaders:[
{
// 将当前项目中所有的.js文件都要进行es6转es5操作，node_moudels除外
test:/\.js$/, //表示当前要打包的文件的后缀正则表达式
// loader:'babel-loader?presets[]=es2015', //如果写到这里，将来在打包.vue文件的时候会报错，表示先利用css-loader解析.css文件，再调用style-loader打包
loader:'babel-loader',
exclude:/node_modules/ , //node_modules中的所有.js文件不去转换，提高打包性能
},
{
// 打包css文件
test:/\.css$/, //表示当前要打包的文件的后缀正则表达式
loader:'style-loader!css-loader' //表示先利用css-loader解析.css文件，再调用style-loader打包
},
{
// 打包 sass文件
test:/\.scss$/, //表示当前要打包的文件的后缀正则表达式
loader:'style-loader!css-loader!sass-loader' //实现sass文件的打包
},
{
// 打包less文件
test:/\.less$/, //表示当前要打包的文件的后缀正则表达式
loader:'style-loader!css-loader!less-loader' //实现sass文件的打包
},
{
// 打包url()请求的资源文件
test:/\.(png|jpg|gif|ttf)$/, // 注意url可能请求多个资源，所以将来在项目中通过url导入的资源扩展名必须配置在这里
// loader:'url-loader' //这种配置会将图片变成一个base64的字符串存储到build.js中，如果图片很大的话，那么会造成build.js也比较大，加载的时候会导致效率低下
loader:'url-loader?limit=40000' //限制图片的大小如果<40k则把他当做base64字符串存储到build.js中，如果>40k 则单独将图片存放到磁盘上，将路径打包进去bulid.js
}
]
},
babel:{
presets: ['es2015'],
plugins: ['transform-runtime'] //这句代码就是为了解决打包.vue文件不报错
}
}
