webpack4.0从入门到放弃

1.搭建基础项目

webpack4.0之后，webpack-cli从webpack中分离出来。所以安装需要如下。

npm init
npm install --save-dev webpack
npm install --save-dev webpack-cli
复制代码

2.webpack基本概念

入口文件

1.默认入口文件为src文件夹下index.js文件
2.单页应用入口只有一个。多页应用，一个页面对应一个构建入口。

module.exports={
    entry:'./src/index.js';
}
module.exports={
    entry:{
        main:'./src/index.js';
    }
}
module.exports={
    entry:{
        main:['./src/index.js','./src/xxx.js']
    }
}
复制代码

loader

loader类似于webpack的一个转换器，负责把某种文件格式转换成webpack可以支持打包的模块。

plugin

plugin做出模块代码转换之外的工作。

输出

module.exports={
    output:{
    //path中可以开启hash，避免新版本发布时使用浏览器缓存。
        path:path.resolve(__dirname,'dist'),
        filename:[name].js,
    }
}
复制代码

3.搭建开发环境

关联html

有时候我们开启了hash,导致每次生成的文件的名字都有hash，这样html引入的js文件就会有不匹配的情况出现。所以我们需要html-webpack-plugin来进行配置。

const htmlwebpackplugin=require('html-webpack-plugin');
module.exports={
    plugin:{
        new htmlwebpackplugin({
        filename:'index.html',
        template:'assets/index.html' //模板
        })
    }
}
复制代码

处理css

module.exports={
    module:{
        rules:[{
            test:/\.css/,
            include:[
            path.resolve(__dirname,'src')
            ],
            use:[
            'style-loader',
            'css-loader'
            ]
        }]
    }
}
复制代码

创建的css文件需引入到index.js中，进行构建。但打包后的代码并不是以css的形式生成的，而是先用css-loader解析css依赖，然后style-loader将其解析成js代码。如果需要将其转成css分离出来，需要使用mini-css-extract-plugin插件。

处理图片文件

需要file-loader进行处理

使用babel

需要babel-loader

启动静态服务来开发

需要在项目中安装webpack-dev-server

"scripts": {
  "build": "webpack --mode production",
  "start": "webpack-dev-server --mode development"
}
复制代码

未完待续。。。

转载于:https://juejin.im/post/5d0881656fb9a07ef44408cc