webpack4学习笔记

经过上周的webpack4学习,踩了不少坑

比如不理解为什么webpack-dev-server启动后本地没有dist文件;

比如babel用错版本,使用了babel-core 6.26.3、babel-loader 8.0.4,导致无法编译成ES5,在IE下报错;

总算有点入门了

之前用过vue-cli集成的webpack3.x,假设你使用过webapck3,应该对entry/output/loader/plugin配置和功能有所了解,这里就不记录了,有空再补充


相比webpack3,webpack4有几个改动点:

  • webpack4官方称可以做到零配置

  • webapck4默认有出口入口,entry output可以不配置了,entry默认值为:./src/index.js,output默认值为:./dist/main.js

  • webpack4内置mode,可以指定development、production、none,分别对应着不同的环境。默认的是production

  • webpack-cli抽离出来了,以前集成在webpack包里,现在要单独安装npm i webpack-cli --save-dev

  • 对CSS的支持方面,废弃了ExtractTextPlugin,改用MiniCssExtractPlugin插件


另外,踩得几个坑

  • 开发模式(“dev”: “webpack-dev-server --mode development”)本地磁盘没有创建dist文件夹和打包文件,F12的source中看到的文件存储在内存之中

  • webpack编译成ES5后,Object.defineProperty(fn, name, ObjectFactory(name)),有使用defineProperty属性,该属性支持IE9及以上

  • 注意你使用的webpack版本、babel版本、babel-loader版本要对应,否则会报错,要对应;

    • babel 6之后命名改了,之前为"babel-core":"^6.26.3"
    • 现在为"@babel/core":"^7.1.0",安装时要注意
    • //webpack 4.x | babel-loader 8.x | babel 7.x,编译成ES5写法为options:{presets: [’@babel/preset-env’]}
    • //webpack 4.x | babel-loader 7.x | babel 6.x,编译成ES5写法为options:{presets: [‘es2015’]}

贴一下我的package.json和webpack.config.js

  • 目录结构
    目录结构

  • package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "First webpack-demo",
  "private": true,
  "scripts": {
    "build": "webpack --mode production --config webpack.config.js",
    "dev": "webpack-dev-server --mode development"
  },
  "author": "IronKee",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.0",
    "babel-loader": "8.0.4",
    "babel-polyfill": "^6.26.0",
    "@babel/preset-env": "^7.1.0",
    "clean-webpack-plugin": "^1.0.0",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^4.0.0-beta.3",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "lodash": "^4.17.11",
    "mini-css-extract-plugin": "^0.5.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.28.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.14"
  }
}
  • webpack.config.js(学习过程中把注解都加上了,所以注解比较多)
const path = require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const CleanWebpackPlugin=require('clean-webpack-plugin');
const webpack=require('webpack');
const MiniCssExtractPlugin=require("mini-css-extract-plugin");

module.exports={
    //入口文件
    entry:'./src/index.js',
    //出口文件
    output:{
        //打包文件夹,__dirname是node.js的一个全局环境变量,存储的是文件所在目录
        path:path.resolve(__dirname,'dist'),
        //打包文件名称,可以以name/id/hash放在中括号里区分文件名
        //如果入口文件是多个,这个时候文件名称不能写死,可配合[name][hash:6]区分
        //当entry为数组的时候,webpack会把数组里所有文件打包成一个js文件
        //当entry为对象的时候,webpack会把对象里的文件分别打包成多个js文件
        //filename:'[name]_[hash:6].js'
        filename:'[name].js'
    },
    //模块,借助loader解读CSS、图片转换压缩、es5等
    module: {
        rules: [
            // {
            //     test: /\.css$/, //以点开始css结尾的文件
            //     //顺序不能搞错,这个loader的意思为,在入口文件里找到.css类型的文件,先拿css-loader去处理成浏览器认识的css,再拿style-loader把处理后的css放在页面的style标签里
            //     use: ['style-loader', 'css-loader']
            // },
            // {
            //     test:/\.css$/,
            //     use:[MiniCssExtractPlugin.loader,"css-loader"]  //代替style-loader
            // },
            {
                test:/\.css$/,  //以点开始css结尾的文件
                use:[
                    //这是一个loader,如果loader需要给参数,就写成对象的形式
                    {
                        loader:MiniCssExtractPlugin.loader, //loader是哪个
                        options:{   //所有的配置参数都要放在这个对象里面
                            publicPath:'../'    //这个表示在css文件里但凡用到地址的地方在其前面加个目录'../',这个是为了能找到图片
                        }
                    },
                    'css-loader'    //这个loader没有其它选项就直接写
                ]
            },
            // {
            //     test:/\.(jpg|png|gif)$/,    //找到三种格式中的任意一种
            //     use:['file-loader'] 解析地址
            // },
            {
                test:/\.(jpg|png|gif)$/,
                //use:['file-loader']
                use:[
                    {
                        loader:'url-loader',    //把图片转成base64
                        options:{
                            limit:50*1024,    //小于50k就会转成base64
                            outputPath: 'images'
                        }
                    }
                ]
                
                //use:'url-loader?limit=50000&outputPath=images'    //loader的另一种写法,与get请求方式相同
            },
            {
                test:/\.less$/,
                use:[    //把less编译到css文件里
                    {
                        loader:MiniCssExtractPlugin.loader,
                        options:{
                            publicPath:'../'
                        }
                    },
                    'css-loader',    //注意顺序
                    'less-loader'
                ]
            },
            // {
            //     test:/\.scss$/,
            //     use:[    //把scss编译到css文件里
            //         {
            //             loader:MiniCssExtractPlugin.loader,
            //             options:{
            //                 publicPath:'../'
            //             }
            //         },
            //         'css-loader',    //注意顺序
            //         'sass-loader'
            //     ]
            // },
            {
                test:/\.js$/,
                use:[
                    {
                        //webpack 4.x | babel-loader 8.x | babel 7.x
                        //webpack 4.x | babel-loader 7.x | babel 6.x
                        loader:'babel-loader',
                        options:{    //env针对的是ES的版本,它会自动选择。react针对的就是react
                            presets: ['@babel/preset-env']
                        }
                    }
                ],
                exclude: /node_modules/,    //不去检查node_modules里的内容,那里的js太多了,会非常慢
                include:path.resolve(__dirname,'src'),    //直接规定查找的范围
            }
        ]
    },
    // //模式选择
    // mode:'development',
    // //loader 转换器
    // loader:{},
    //插件 用于生产模块和各项功能
    plugins:[
        new CleanWebpackPlugin(['./dist']),  //这个一定要放在最上面,作用是先删除dist目录再创建新的dist目录。里面的参数为要删除的目录,放在一个数组里面
        new HtmlWebpackPlugin({
            title:'webpack demo',    /*这个值对应html里的title*/
            template:'./src/index.html',    //模板文件地址
            filename:'index.html',    //文件名,默认为index.html(路径相对于output.path的值)
            inject:'head',    //script标签的位置,true/body为在</body>标签前,head为在<head>里,false表示页面不引入js文件
            hash:true,    //是否为引入的js文件添加hash值
            //chunks:['one'],    //页面里要引入的js文件,值对应的是entry里的key。省略参数会把entry里所有文件都引入
            //excludeChunks:['one'],    //页面里不能引入的js文件,与chunks刚好相反
            minify:{    //html-webpack-plugin内部集成了html-minifier
                collapseWhitespace:false,    //压缩空格
                removeAttributeQuotes:false, //移除引号
                removeComments:true,        //移除注释
            },
        }),
        new webpack.HotModuleReplacementPlugin(),    //引入热更新插件
        new MiniCssExtractPlugin({
            filename:'css/index.css'    //文件目录会放入output.path里
        }),
    ],
    //服务器配置
    devServer:{
        // contentBase: path.resolve(__dirname,'dist'), //设置项目的基本目录结构
        host: 'localhost', //服务器IP配置
        port: '1990', //端口配置
        open:true,    //自动打开刷新页面
        hot:true,    //开启热更新
        // compress: true //服务器压缩是否开启
    }
}
import 'babel-polyfill';    //处理ES6新增的API,需要导入这个模块
import './css/index.css';   //两个点是找上级目录
import './css/index.less';  //引入less文件
// import './css/index.scss';  //引入sass文件

import img1 from './images/img_01.jpg';


const loadImg=img=>{
    const newImg=new Image();
    newImg.onload=()=>document.body.appendChild(newImg);
    newImg.src=img;
};

loadImg(img1);

//ES6
const fn=()=>console.log(123);

//map对象
const map=new Map();
map.set('name','kaivon');
console.log(map);

//Array.from方法
const strArr=Array.from('kaivon');
console.log(strArr);

//Object.assign方法
const t1={a:1};
Object.assign(t1,{b:2},{c:3});
console.log(t1);

//generator
function* bear(){
    console.log('熊大');
    console.log('熊二');
}
bear().next();

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!--这是个模板文件,title里的语法是为了能解析配置参数里title对应的值-->
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
        <div id="box">
            这是自带的div
            <p>webpack demo</p>
            <ul>
                <li><a href="#">red</a></li>
                <li><a href="#">green</a></li>
                <li><a href="#">blue</a></li>
            </ul>
        </div>
    </body>
</html>
  • index.css
#box{
    width: 800px;
    height: 500px;
    border: 5px solid #999;
    color: #00f;
    /* background: green; */

    background: url(../images/img_01.jpg);
}
  • index.less
@w:200px;
@border:1px solid #f00;

#box{
    width: @w;
    border: @border;
    ul{
        margin: 0;
        padding: 0;
        list-style: none;
        
        li{
            height: 30px;
            background: #ccc;
            
            a{
              color: #f00;
              &:hover{  //&为上一层选择器
                  color: blue;
              }
            }
        }
    } 
}

写在后面
因为想写一个个人项目练手,学习如何搭建项目、搭建页面,使用es6等,但是发现无从下手,不可能还像以前那样写html引入js和css,想用es6,sass,less,npm包,你的选择貌似只有webpack,gulp等;
webpack是趋势,是最流行的前端构建工具,没有之一,用了它你会发现它非常的强大,非常的方便


---- 未完待续 ----

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值