1、npm init     
  生成package.json文件
2、npm install webpack webpack-cil --save-dev
  安装webpack和webpack-cli
3、新建一个src文件夹,里面创建index.js文件

console.log(123);
  webpack会自动查找src下的index.js文件,将它打包到dist文件夹里,默认生成main.js,main.js就是打包后的文件
4、修改package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development", // (开发模式)
"build": "webpack --mode production" // (生产模式)
},

  开发模式生成的文件不压缩

  生产模式生成的文件压缩

5、运行npm run dev和npm run build
  此时,根目录下就会多出dist文件夹,里面有main.js文件,可以分别运行这两个命令,看一下生成的main.js文件的区别
6、以上这些都是默认的,当然这些可以自己配置
  新建webpack.config.js文件
const path = require("path")

module.exports = {
entry: "./src/index.js", // 入口
output: { // 出口
filename: "bundle.js", // 生成打包文件的名字
path: path.join(__dirname, "dist") // 打包文件的路径,__dirname指当前根目录
}
}

  此时运行npm run dev,在dist文件夹下就能看到打包生成的bundle.js文件

7、以上是单文件入口,那如果是多文件入口呐
  只需修改webpack.config.js文件

module.exports = {
entry: { // 多文件入口
index: "./src/index.js",
test: "./src/test.js"
},
output: { // 出口
filename: "[name].bundle.js", // 生成打包文件的名字 ==>注意这里,因为是多文件入口,所有需要[name]来区分文件
path: path.join(__dirname, "dist") // 打包文件的路径,__dirname指当前根目录
}
}

  运行npm run dev

  就能看到打包后的index.bundle.js和test.bundle.js文件,
  entry也可以写成数组的形式
    entry: ["./src/index.js", "./src/test.js"],
  这个方式和对象形式结果是一样的。
  将代码恢复,删除掉刚刚生成的index.bundle.js和test.bundle.js文件,以及mian.js文件
8、设置webpack-dev-server
  安装 npm install webpack-dev-server --save-dev
  在webpack.config.js进行配置
 devServer: {
// 设置基本目录结构
contentBase: path.join(__dirname, "dist"),
// 服务器的ip地址,也可以使用localhost
host: "localhost",
// 服务端压缩是否开启
compress: true,
// 配置服务端口号
port: 8080
}

  修改package.json内容为

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"serve": "webpack-dev-server --mode development",
"dev": "webpack --mode development",
"build": "webpack --mode production"
},

  运行npm run serve

  成功
9、打包html文件
  安装html-webpack-plugin,它能够帮我们插入script及link标签
  npm install html-webpack-plugin --save-dev
  src下新建index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="main">
hello
</div>
</body>
</html>

  在webpack.config.js中进行配置

  开头引入插件

const HtmlWebpackPlugin = require('html-webpack-plugin')

  在plugins配置

plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/inde.html',
// chunks: ['index'], // 多入口时需要用到
hash: true // 插入的文件后面加一段随机数
})
],

  运行npm run serve,浏览器中打开localhost:8080

  成功,此时dist文件夹下也有了index.html文件
10、打包css文件
  在src下新建main.css文件

#main{
height: 100px;
width: 100px;
font-size: 40px;
color: #FF6347;
background-color: pink;
}

  需要安装css-loader,style-loader

  npm install css-loader style-loader --save-dev
  webpack.config.js中配置

module: {
rules:[
// css loader
{
test: /\.css$/,
use: ["style-loader", "css-loader"] // 这里顺序不能颠倒
}
]
},

  

  在入口文件index.js中引入mian.css文件
  import main from './main.css'
  // require('./main.css')
  这两种引入方式都可以
  npm run serve

  效果有了
11、使用style-loader会将样式内嵌到HTML中,但是我们不希望这样,我们想在HTML中通过link标签的形式引入。
  使用extract-text-webpack-plugin插件分离css
  安装:
    npm install  extract-text-webpack-plugin --save-dev
  webpack.config.dev中配置
new ExtractTextPlugin({
filename: "index.css",
})

  

 rules:[
// css loader
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
}) }
]

  

然后npm run build 打包,结果报错

  这是因为extract-text-webpack-plugin目前版本并不支持webpack4
  所以安装最新版本
    npm install  extract-text-webpack-plugin@next --save-dev
  再次打包
  npm run build,成功,此时dist文件夹里就有了index.css文件

  

  此时dist下的html文件中就是通过link的方式引入css的

  如果在css中引入图片打包呐
12、css中引入图片
  在src/index.html新加一个div,class为bg。在src/main.css中添加

.bg{
height: 50px;
width: 50px;
background: url("./img/confirm.png")
}

  

  npm run build 打包

  报错
  这是因为缺少loader,安装file-loader和url-loader
  npm install file-loader url-loader --save-dev
  配置:
 // 图片 loader
{
test: /\.(png|jpg|gif|jpeg)/,
use: [{
loader: 'url-loader',
options: {
limit: 500 //是把小于500B的文件打成Base64的格式,写入JS
}
}]
}

  

  npm run build 打包 ,成功
  npm run serve 看下

  有了
  这里配置的时候只引用了url-loader,这是因为,url-loader封装了file-loader
  url-loader工作分两种情况:
    1.文件大小小于limit参数,url-loader将会把文件转为DataURL(Base64格式);
    2.文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给file-loader。
 
  也就是说,其实我们只安装一个url-loader就可以了。但是为了以后的操作方便,所以顺便安装上file-loader。
13、html中通过img引入图片
  这时候css中引入图片没问题,但是在HTML文件中通过img引入图片,会有问题,打包虽然没有报错,但是页面上并没有显示图片,控制台能看到报错

  这是因为打包后路径的问题。
  使用html-withimg-loader来处理html引入的img图片
  安装:
    npm install html-withimg-loader --save-dev
  配置
    url-loader中添加

options: {
limit: 500, //是把小于500B的文件打成Base64的格式,写入JS
outputPath: 'images/' //打包后的图片放到images文件夹下
}

  

在module中添加

{
test: /\.(htm|html)$/i,
use: ["html-withimg-loader"]
}

 

  然后npm run build,成功,但是dist文件夹中并没有生成images文件夹,这是因为设置了limit,如果引用的图片小于500k,url-loader将图片转换成base64格式写入js,引入一张大的试试,再打包

 

  可以看到区别,1.jpg由于超过400k,所以就被打包到了dist/images中了
 
14、使用less
  安装less:
    npm install less --save-dev
  打包需要less-loader,再安装less-loader:
    npm install less-loader --save-dev
  配置:

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

  

  在src文件夹下创建indexless.less文件

@bgColor: #FFA54F;
.my{
height: 100px;
width: 100px;
background-color: @bgColor;
}

    

  对应的在index.html中添加class为my的div块
  npm run serve,浏览器中就能看到了

15、分离出来less文件,像分离css文件一样
  其实和分离css文件配置基本是一样的

 // less loader
{
test: /\.less$/, use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "less-loader"]
}), }

  

  这时候运行npm run build 打包
  看dist文件夹下生成的index.css文件

  已经生成
16、使用sass,配置大致相同
 
17、自动添加CSS3属性前缀
  安装插件:
    npm install postcss-loader autoprefixer --save-dev
  在根目录下创建postcss.config.js文件
module.exports = {
plugins: [
require('autoprefixer') //自动添加前缀插件
]
}

  

webpack.config.js配置

// css loader
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "postcss-loader"]
}) },

  

npm run build打包
看下对比

webpack4基本配置的更多相关文章

  1. webpack4.x配置详解,多页面,多入口,多出口,新特性新坑!!

    花了差不多一天多的时间,重新撸了一遍webpack4.x的常用配置. 基本上常用的配置都熟悉了一遍,总体上来讲,为了对parcel进行反击,webpack从4.x开始,正在朝着尽可能的简化配置文件的方 ...

  2. webpack4入门配置

    下面是抄过来的,方便自己翻越 webpack4.x入门配置   1.首先npm install webpack webpack-cli webpack-dev-server -g (mac电脑用超级管 ...

  3. es6 装饰器decorator的使用 +webpack4.0配置

    decorator 装饰器 许多面向对象都有decorator(装饰器)函数,比如python中也可以用decorator函数来强化代码,decorator相当于一个高阶函数,接收一个函数,返回一个被 ...

  4. Webpack4 splitChunks配置,代码分离逻辑

    博客不知道啥时候写的了,一直在草稿箱没写完,突然感觉今年过去大半了,又没怎么写博客.写写完,有始有终 1.代码分离升级 原来项目代码分离是通过下面的配置,基于bundle-loader插件,通过rou ...

  5. webpack4 入门配置研究

    1. 全局安装 npm install webpack webpack-cli webpack-dev-server -g 1.1)输密文的密码(电脑开机) 1.2)安装成功 2. 输入命令mkdir ...

  6. webpack4进阶配置

    移动端CSS px自动转换成rem 需要两步来实现: px2rem-loader 在构建阶段将px转换成rem lib-flexible 页面渲染时动态计算根元素的font-size值(手机淘宝开源库 ...

  7. webpack4的配置你都掌握了么?

    webpack5都出了,webpack4的的基本配置,解析ES6,引入CSS,编译Less,设置image等等,你都会了么? ​解析ES6 了解Babel Babel是一个JavaScript编译器, ...

  8. webpack4.x配置详情

    webpack打包工具现在非常流行,熟悉并且能够进行配置也变得非常重要.在学习和使用的过程中遇到过很多的问题,希望能够让自己记录下来,巩固自己的学习. 1.创建文件目录 先在自己的常用盘中(我自己的项 ...

  9. vue项目的webpack4.X配置

    这两天摆弄webpack,躺过很多坑,直到今天看了一位博主的文章才得以解决.他对配置中的各个部分做说明. 下面的配置99.9%抄自博主: https://www.cnblogs.com/nianyif ...

随机推荐

  1. 性能测试工具LoadRunner28-LR之内部数据参数类型

    Date/Time 在“Parameter type”中您可以选择Date/Time,即:用当前的日期/时间替换参数.要指定日期/时间的格式,可以从格式列表中选择一个格式,或者指定您自己的格式. [l ...

  2. Object.create 以及 Object.setPrototypeOf

    第一部分 Object.crate() 方法是es5中的关于原型的方法, 这个方法会使用指定的原型对象以及属性去创建一个新的对象. 语法 Object.create(proto, [ properti ...

  3. netty之==TCP粘包/拆包问题解决之道(一)

    一.TCP粘包/拆包是什么 TCP是一个“流”协议,所谓流,就是没有界限的一长串二进制数据.TCP作为传输层协议并不不了解上层业务数据的具体含义,它会根据TCP缓冲区的实际情况进行数据包的划分,所以在 ...

  4. .NET Core 部署到CentOS–3.supervisord守护进

    1. 安装 sudo yum install python-setuptoolssudo easy_install supervisor 2. 配置 安装成功后,输入supervisord 会显示配置 ...

  5. Xtrareport绘制行号

    需要是用事件beforePrint (在打印数据之前的事件) private void xrTableCell12_BeforePrint(object sender, System.Drawing. ...

  6. StreamReader类

    StreamReader类用于从文件中读取数据,该类是一个通用类,可用于任何流,构造方法和StreamWrite类格式一样的. 创建方式有两种: 1.先创建Filestream类在创建StreamRe ...

  7. Fluent API配置

    1.Fluent API配置Model试用行更广 2.使用方法: public class TransferConfig: EntityTypeConfiguration<TransferInf ...

  8. Calendar计算一个月前的日期,踩坑记录

    错误示范:calendar.set(Calendar.MONTH, calendar.get(Calendar.MONTH) - 1);//获取一个月前的今天这种写法假设传入的日期为2019-03-3 ...

  9. 资源管理与调度系统-YARN的基本架构与原理

    资源管理与调度系统-YARN的基本架构与原理 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 为了能够对集群中的资源进行统一管理和调度,Hadoop2.0引入了数据操作系统YARN. ...

  10. playbook+roles

    playbook setup ansible_all_ipv4_addresses # ipv4的所有地址 ansible_all_ipv6_addresses # ipv6的所有地址 ansible ...