webpack4.x零基础，入门到实战

day 1 【webpack的安装】

1.安装node，百度安装教程（非常简单的，不作介绍了哈），安装后，检查安装的版本：【 cmd => node -v】 若有显示版本，安装成功

2.安装webpack，【cmd => mkdir webpack_demo => cd D: => cd D:\webpack_demo => npm install -g webpack】安装成功后会显示webpack版本，如下面版本4.28.2

3.初始化【npm init】 会有一个模板提示，可以一直按enter，完成后生成package.json文件，此模板可以在package.json文件中更改配置

4.项目目录的安装，【npm install --save-dev webpack】参数–save是要保存到package.json中，dev是在开发时使用这个包，而生产环境中不使用。安装完后，会建立node_modules文件夹。

5.到此，已经恭喜你成功安装上webpack，输入【webpack -v】检查版本号

day2 【快速上手一个Demo】

1.在项目文件夹webpack_demo下建立dist文件夹和src文件夹：

src是源码文件，dist是我们编译打包好的文件。

2.在dist文件下手动建立一个index.html文件，并写入代码。

    
    
    
    


    

    //这里引入了一个bundle.js文件。这个文件现在还没有，这是用webpack执行打包命令后生产的文件
    

3.接下来在src文件夹下建立entry.js的文件，用于编写我们的JS代码，也是我们的入口文件

document.getElementById('title').innerHTML='Hello Webpack';

4.第一次Webpack打包
打包之前，全局安装webpack-cli，【npm install webpack-cli -g】

好了，正式打包【webpack src/entry.js -o dist/bundle.js】，这里注意一下，每个版本的打包操作不一样的哦
比如我用的这个版本操作是 webpack 入口文件 -o 打包文件，而之前版本是空格代替-o的。

此时，dist文件夹会打包出bundle.js文件，也就是我们的打包结果：

这里的打包文件是用于生产的，所以是压缩文件。
到这里，我们就可以在浏览器中预览结果了，这里采用【npm install -g live-server】安装live-server。

然后执行【live-server】或者在网页地址栏输入下面的地址，http://127.0.0.1:8080网页中显示出了项目文件夹的信息。点开dist文件夹，就可以看到index.html信息了。

day3 【配置文件webpack.config.js】

1.webpack.config.js就是Webpack的配置文件，这个文件需要自己在项目根目录下手动建立。

const path = require('path');
module.exports={
    //入口文件的配置项
    entry:{
        entry:'./src/entry.js'
    },
    //出口文件的配置项
    output:{
        //打包的路径
        path:path.resolve(__dirname,'dist'),
        //打包的文件名称
        filename:'bundle.js'
    },
    //模块：例如解读CSS,图片如何转换，压缩
    module:{},
    //插件，用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

2.多入口、多出口配置

const path = require('path');
module.exports={
    //入口文件的配置项
    entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js'
    },
    //出口文件的配置项
    output:{
        //打包的路径
        path:path.resolve(__dirname,'dist'),
        //打包的文件名称
        filename:'[name].js'
    },
    //模块：例如解读CSS,图片如何转换，压缩
    module:{},
    //插件，用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

day4 【server服务和热更新】

1.安装webpack-dev-server，【npm install webpack-dev-server --save-dev】

2.webpack.config.js里面的devServer配置：

devServer:{
        //设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
        //服务器的IP地址，可以使用IP也可以使用localhost
        host:'localhost',
        //服务端压缩是否开启
        compress:true,
        //配置服务端口号
        port:1717
    }

如果host里想改成IP地址，可以用【ipconfig】查询本机IP地址

3.配置package.json里的scripts选项

"scripts": {
    "server": "webpack-dev-server"
  },

配置好保存后， 【npm run server 】打开服务器。然后在浏览器地址栏输入http://localhost:1717就可以看到结果了。

day5 【CSS文件打包】

1.在/src目录下，我们建立一个css文件夹，在文件夹里建立index.css文件

body {
    background-color: red;
    color: white;
}

2.CSS文件建立好后，需要引入到入口文件中，才可以打包到，这里我们引入到entry.js中。

/src/entery.js中在首行加入代码：

import css from './css/index.css';

3.CSS的引入做好后，我们就需要使用loader来解析CSS文件了，这里我们需要两个解析用的loader，分别是style-loader和css-loader。

style-loader: 它是用来处理css文件中的url()等， 安装【npm install style-loader --save-dev】

css-loader：它是用来将css插入到页面的style标签， 安装【npm install css-loader --save-dev】。

4.两个loader都下载安装好后，我们就可以配置我们loaders了，修改webpack.config.js中module属性中的配置代码如下：

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

day6 【HTML文件的发布】

这里就忽略JS压缩了，因为4.x版本后会自动压缩，需要深入了解的请查官方网站或者技术胖博客讲解。

{---------我们先把dist中的html文件剪切到src目录中，并去掉我们的JS引入代码（webpack会自动为我们引入JS），因为这才是我们真实工作的目录文件结构。之前都是为了让大家展示所以做的是默认打包完成的效果。--------}

1.打包Html文件，首先在webpack.config.js引入html-webpack-plugin插件：

const htmlPlugin=require('html-webpack-plugin');

2.安装【npm install html-webpack-plugin --save-dev 】

3.最后在webpack.config.js里的plugins里进行插件配置，配置代码如下。

 new htmlPlugin({
           // minify：是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号。
            minify:{
                removeAttributeQuotes:true
            },
            //为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
            hash:true,
            //是要打包的html模版路径和文件名称。
            template:'./src/index.html'
        })

4.上边的都配置完成后，我们就可以在终端中使用【webpack】进行打包。你会看到index.html文件已经被打包到我们的dist目录下了，并且自动为我们引入了路口的JS文件。

到这里，就完成了打包html，css，js的任务哦~！！！

day7 【CSS中的图片处理】

1.图片写入CSS：
1.1 找到图片后在src目录下新建一个images文件夹，把图片放入images文件夹。

1.2 在src文件夹下的index.html文件中增加一个放置div的标签，在css中设置成背景图

2.安装file-loader和url-loader
【npm install --save-dev file-loader url-loader】

3.配置url-loader

 module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
            //此部分为url-loader的配置，limit的大小可以视情况设置
                test:/\.(png|jpg|gif)/ ,
                use:[{
                    loader:'url-loader',
                    options:{
                        limit:500000
                    }
                }]
             }
        ]
    },

然后就可以使用webpack进行打包了，执行【webpack】，

可以看到，图片已经打包到dist文件夹了，但是因为图片小于设定值，所以在js文件中处理base64位图片，也就是代码图。如果大于设定值，就会打包到dist文件夹中了，两种情况都会在页面中渲染的

day8 【CSS分离与图片路径处理】

CSS分离:
1.1 首先安装插件：【npm install --save-dev extract-text-webpack-plugin】

1.2 安装完成后，需要先用require引入

const extractTextPlugin = require("extract-text-webpack-plugin");

1.3 在plugins里配置，

new extractTextPlugin("css/index.css")

这部配置完成后，包装代码：还要修改原来我们的style-loader和css-loader。

1.4 【webpack】打包咯------这里打包会出错，问题是哪里呢

原因：经过排查发现是由于extract-text-webpack-plugin目前还没有webpack4版本。
解决办法：【npm install extract-text-webpack-plugin@next --save-dev】

升级extract-text-webpack-plugin的版本，跟上webpack的步伐！

1.5 图片路径处理：
1.5.1 我们在webpack.config.js 上方声明一个对象，叫website

1.5.2 然后在output选项中引用这个对象的publicPath属性

day9 【处理HTML中的插入图片】

1.更改scripts里面的配置，增加build命令，这样的话，打包命令就是【npm run build】

"scripts": {
    "server": "webpack-dev-server --open",
    "build":"webpack"
  },

2.图片打包到指定的文件夹下

3.安装html-withimg-loader：【npm install html-withimg-loader --save-dev】

4.配置webpack.config.js下的loader：增加对象

然后执行 npm run server 就可以打包，展示出完整页面了。

呼呼~~~！！！！