分享 webpack3.0 的安装与使用

准备开始

---

webpack3.0 的安装

之前在很多网站上寻找webpack3.0的知识，但是结果都不理想。经过很多努力，终于学到了一些知识，现在把这些知识分享出来吧。（希望能对小伙伴有所帮助）

全局安装

1.jpg

2.jpg

3.jpg

4.jpg

局部安装

5.jpg

更新webpack

6.jpg

webpack.config.js基本介绍

const path=require('path');
 module.exports={ //模块导出
entry:{
    entry:'./src/entry.js',
    entry2:'./src/entry2.js'
},//入口配置项
output:{
    path:path.resolve(__dirname,'dist'),//会把一个路径或路径片段的序列解析为一个绝对路径。
    filename:'[name].js'
},//出口配置项
module:{},//模块
plugins:[],//插件
devServer:{
    contentBase:path.resolve(__dirname,'dist'),//热更新，基本目录结构
    host:'10.117.44.130',//主机IP地址
    compress:true,//服务器压缩参数，true（压缩），false
    port:1717
},//开发服务
}

热更新

• 利用npm下载webpack-dev-server；
• 修改package.json；

• 启用热更新。（具体内容如下图所示）

  
  
  

  7.jpg

---

8.jpg

---

9.jpg

打包CSS文件

• 用npm下载css-loader和style-loader： css-loader对CSS样式、标签进行处理，style-loader对CSS中的url进行处理。

• webpack.config.js中的module：

•   module:{
    rules:[  //规则
        {
            test:/\.css$/,   //用正则表达式来找到要处理的文件扩展名
            use:['style-loader','css-loader']  //要用到的loader
        }
    ]
    },//模块`
  

• 知识扩展：

    module:{
    rules:[  //规则
        {
            test:/\.css$/,   //用正则表达式来找到要处理的文件扩展名
            use:['style-loader','css-loader']  //这是第一种写法//要用到的loader
            //loader:['style-loader','css-loader'] //这是第二种写法
            /*use:[{
                loader:'style-loader'
            },{
                loader:'css-loader'
            }]*/  //这是第三种写法（最常用）
        }
    ]
    },//模块
  

JS代码压缩

• 第一步：

    const uglify=require('uglifyjs-webpack-plugin');//引入uglify.js
  

• 第二步：

•   plugins:[
    new uglify()
    ],//插件
  

HTML文件打包

• 引入插件

    const htmlPlugin=require('html-webpack-plugin');//需要安装
  

• 安装插件

    npm install --save-dev html-webpack-plugin
  

---

持续更新中......

如果哪里有错误，欢迎小伙伴指正。--------------
意见反馈-邮箱：[email protected]