webpack-从无到有

前言介绍：

webpack是一款强大的模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理,优势如下:

1）webpack 是以commonJS的形式来书写，但对AMD/CMD的支持也很全面,方便旧项目进行代码迁移

2）能被模块化的不仅仅是JS,还包括各种资源文件

3）开发便捷，能替代部分gulp的工作，比如打包、混淆压缩、图片转base64等

4）扩展性强，插件机制完善，特别是支持React热插拔

从无到有star

1、创建一个文件夹

folder

--src

2、初始化

npm init -y

npm install wenpack@3.8.1 --save-dev //为避免出现版本兼容问题，故指定3.8.1版本

//导入path模块；注：path模块是node的一个核心模块

letpath=require("path");

//导入html依赖-->构造函数

letHtmlWebpackPlugins=require("html-webpack-plugin")

//配置star

module.exports= {

// 配置webpack的入口文件；

entry:"./src/main.js",

// 打包之后文件的出口；

output:{

//生成的js文件name

filename:'build.js',

//通知生成的js放在哪个文件夹下面

path:path.resolve('./dist')

注：path.resolve接受一个相对路径，返回一个绝对路径；path的配置，让生成的文件放在当前创建的

},

//指定解析器；

module: {

//规定

rules:[

{

test:/\.js$/,//获取以.js结尾的文件-->正则

use:"babel-loader",//指定使用的依赖

exclude:'/node_modules/'//node_modules中的js不需要进行es6到es5的编译；排除node_modules

},

{

test:/\.css/,

use:["style-loader","css-loader"]

},

{

test:/\.less/,

use:["style-loader","css-loader","less-loader"]

},

{

test:/\.(png|jpg|gif)/,

use:"url-loader"

}

]

},

plugins:[//html模版

newHtmlWebpackPlugins({

//html路径

template:"./index.html"

})

]

};

4、编写package.json

{

"name":"test",

"version":"1.0.0",

"description":"",

"main":"index.js",

"scripts": {

//build环境

"build":"webpack",

//使用端口访问环境

"dev":"webpack-dev-server"

},

"keywords": [],

"author":"",

"license":"ISC",

//安装依赖

"devDependencies": {

"babel-core":"^6.26.0",

"babel-loader":"^7.1.2",

"babel-preset-es2015":"^6.24.1",

"babel-preset-stage-0":"^6.24.1",

"css-loader":"^0.28.7",

"file-loader":"^1.1.5",

"html-webpack-plugin":"^2.30.1",

"less":"^2.7.3",

"less-loader":"^4.0.5",

"style-loader":"^0.19.0",

"url-loader":"^0.6.2",

"webpack":"^3.8.1",

"webpack-dev-server":"^2.9.4"

}

}

5、src下创建文件开发文件

src

--main.js

--aTest.js

--index.css

--style.less

main.js[

//导入aTest.js文件

import*as aTestfrom"./aTest.js";

console.log(aTest.a);

//es6语法

lethh=16;

leta=b=>c=>d=>b+c+d;

//es7语法

letobj= {name:12};

letobj1= {name:22};

letnewObj= {...obj,...obj1}

//导入css文件

import"./index.css"

//导入less文件

import"./style.less"

//导入图片

importpagefrom"./../2.jpg"

//创建一个实例

letnewPage=newImage;

//创建一个DOM

newPage.src= page;

//添加到body

document.body.appendChild(newPage)

];

aTest.js[

export leta="需要导出的参数";

export letb=“100”;

];

index.css[

body{

background:#3c763d;

}

];

style.less[

body div{

color:brown;

font-size:50px;

}

];

6、创建文件夹src的同级目录下的文件

.babelrc[

{

//指定预设

“presets”:["es2015","stage-0"]

}

];

index.html[

Title

测试数据

]；

7、执行命令

npm run build --绝对路径访问执行

npm run dev --端口执行

附：目录结构