首先创建这几个文件，和文件夹。

初始化包

在根目录下：npm init -y 会生成package.json文件

这main.js是项目的js入口文件…

里面写：console.log('ok~~~');做测试用

在命令窗口中下载：

webpack ./src/main.js -o ./dist/bundle.js cnpm i webpack-dev-server -D cnpm i webpack -D cnpm i webpack-cli -D cnpm i html-webpack-plugin -D

在package.json文件的“scripts”里面添加一条：

"dev": "webpack-dev-server --open --port 3000 --hot"

在根目录里创建webpack.config.js配置文件，并写入

var path=require('path') var htmlWebpackPlugin =require('html-webpack-plugin') module.exports={ entry:path.join(__dirname,'./src/main.js'), output:{ path:path.join(__dirname,'./dist'), filename:'bundle.js' }, plugins:[ new htmlWebpackPlugin({ template:path.join(__dirname,'./src/index.html'), filename:'index.html' }) ], }

在命令行中:

npm run dev

运行出页面：

说明：-------------------------------------------

webpack作用：

可以处理js文件的相互依赖关系能够处理js的兼容问题，把高级的、浏览器不能识别的语法，转换为浏览器正常识别的语法 语法： webpack 要打包的文件地址 -o 修改后的地址

每次都要重新写 webpack 要打包的文件地址 -o 修改后的地址 这样子太长了。 可以在根目录写一个配置文件webpack.config.js，就只要输入webpack回车就可以了

但是还是要再输入webpack回车，

程序员最大的美德就是懒，于是~~

可使用webpack-dev-server这个工具，实现自动编译打包：

把这个工具安装到项目的本地开发依赖安装完毕后，这个工具的用法和webpack命令的用法完全一样由于这里是在项目中本地安装的，就不能把它当做脚本命令在povershell终端中直接运行webpack-dev-server这个工具，如果想要正常运行，要求在本地项目中必须安装webpack（不是全局） ----在package.json里加 "dev": "webpack-dev-server" ---- 也可以加强版："dev": "webpack-dev-server --open(自动打开页面) --port 3000(设置打开端口号) --contentBase src(自动打开的根目录是src) --hot(1.不重新生成bundle.js，只更新修改过的部分。1.不刷新就改变页面) "

npm i webpack -D npm i webpack-cli -D npm run dev

webpack-dev-server打包好的bundle.js文件没有存放到实际的物理磁盘中，直接托管到电脑的内存里，我们在项目根目录中看不到这个文件

说明结束----------------------------------继续

在index.html里写入一些东西：

<p> 最爱~~ 烧烤，money，奶油蛋糕 </p> <div class="box1"> 可可爱爱，没有脑袋... </div> <div class="box2"> 好好学习... </div>

然后在css文件里，创建index.css，并写入相应样式

body { background-color: papayawhip; font-size: 16px; } .box1,.box2 { width: 200px; height: 150px; font-size: 12px; margin: 40px auto; text-align: center; line-height: 150px; box-shadow: 10px 0 10px purple; background-color: palevioletred; }

下载css相关路由：

cnpm i style-loader css-loader -D

import './css/index.css'

在webpack.config.js文件中配置相关路由（与plugins同级添加以下代码）：

module:{ rules:[ {test:/\.css$/,use:['style-loader','css-loader']}, ] }

便可以再次运行查看 npm run dev

less和sass文件操作类似：

less：

javascript import './css/index.less'

cnpm i less-loader less -D

{test:/\.less$/,use:['style-loader','css-loader','less-loader']}, ```

---

sass：

javascript import './css/index.scss'

cnpm i sass-loader node-sass -D

{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}, ```

接下来是插入背景图片的操作：

webpack 默认只能打包处理js类型的文件，无法处理其他的非js类型的文件 要处理非js类型的文件，要手动安装一些合适的第三方loader加载器 1.要处理css文件，要安装npm i style-loader css-loader -D 2.打开webpack-config.js文件，在里面新增一个配置节点，叫做module，它是一个对象 在这个module对象上有个rules属性，这是一个数组，存放了所有第三方文件的匹配和处理规则

默认情况下webpack不能处理css文件中的url地址，不管是图片还是字体库

cnpm i url-loader file-loader -D

在两个image文件夹中放入图片（这里两个名字是一样的） 在index.css文件中写入样式：

.box1{ background:url('../images/bg.jpg') no-repeat; background-size: 100% 100%; } .box2{ background:url('../images2/bg.jpg') no-repeat; background-size: 100% 100%; }

在webpack.config.js文件中配置相关路由（处理图片路径的loader）：

{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=8908&name=[hash:8]-[name].[ext]'},

说明：-------------------------------------------

两个image文件夹中放入图片（上面放的两个名字是一样的）

{test:/.(jpg|png|gif|bmp|jpeg)$/,use:‘url-loader’},

网页中图片的路径是：url(data:image/jpeg;base64,/9j/4AAQSkZJRgAB。。。。。。A/9k=) no-repeat

{test:/.(jpg|png|gif|bmp|jpeg)$/,use:‘url-loader?limit=8900’},

网页中图片的路径是：url(b9a9e77….jpg) no-repeat;

limit给定的值是图片的大小，单位byte，如果我们引用的图片，大于等于给定的limit值，这不会被转换成base64格式的字符串，反之…（但是我测的相等也是会变成base64格式） 图片–右键–>属性---->看大小

{test:/.(jpg|png|gif|bmp|jpeg)$/,use:‘url-loader?limit=8908&name=[hash:8]-[name].[ext]’},

hash值共32位，这里取前8位

说明结束----------------------------------继续

接下来是引入字体图标的操作：

在index.html文件中写入一个bootstrap的字体图标：

<span class="glyphicon glyphicon-send"></span>

下载bootstrap：

cnpm i bootstrap@3.3.7 -S

cnpm i bootstrap -S （第一次装的不行，后来经过一下午的测试，发现是因为下载的版本不可以，于是后来删包，改package.json里了版本号再 ----> npm install)。所以这次我就直接下载了指定的版本。

引入方式：

直接在index.html文件里引入（下面是本地路径引入，也可以用网上地址引入）： <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">

成功：

用import方式引入：

在main.js文件中写入

//如果通过路径的形式引入node_modules中相关文件，可以省略前面的，直接写后面的路径。 import 'bootstrap/dist/css/bootstrap.css'

在webpack.config.js文件中配置相关路由

{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'}, 如果没有配置会出现这样的错误：

成功： 这种方式引入，会出现部分样式不能显示，body的背景颜色就变成白色的了

初步判断是因为样式被覆盖了，层级不够高。于是我在各种未显示的样式加了！important，然后就可以了

顺便修改了一些样式，让它好看一丢丢~~

注意：

. json文件里不能写注释‘webpack-dev-server’ 不是内部或外部命令，也不是可运行的程序 或批处理文件：要看node_modules里有没有。可以 "删包 ---- cnmp i "下载用cnpm，开始一直用npm后来下载sass时下载不成功就用cnpm了

npm i sass-loader -D ----> npm i node-sass -D 下载不成功，需要用cnpm下载，于是先安装cnpm：npm install -g cnpm -registry=https://registry.npm.taobao.org ----> cnpm i node-sass -D

webpack处理第三方文件类型的过程：

.发现这个文件不是js文件，去配置文件中找有没有对应的第三方loader规则如果找到就调用对应的loader处理这个文件调用loader的时候，是从后向前调用的当最后一个loader调用完毕，就会把处理结果交给webpack进行打包合并，最终输出到bundle.js中去