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. JS匿名函数递归实现阶乘

    var rs = (function (value) { if (value > 1) return value * arguments.callee(value - 1); return va ...

  2. html和Url转码与解码

    JS (JQuery)对Html.URL的编码与解码 首先引入JQuery文件 1.js对Html编码 function htmlEncode(value){ return $('<div/&g ...

  3. carousel 插件隐藏列表中几项导致左右切换出错

    1. 一般的应用场景: 用于左右快速切换显示的列表内容,比如对员工的切换. 对于这种情况必不可少需要按照部门进行搜索,目前我的做法是首次加载所有该用户可以查看的员工列表,选择部门后又选择的隐藏掉其他不 ...

  4. JQuery Dialog对话框 不能通过Esc关闭

    背景:想通过Esc键关闭展示中的Dialog对话框,发现有些对话框可以,有些会失效. 原因分析: 1.对话框上可以输入内容的标签元素可以,反之不行. 2.如果鼠标点击对话框后,也可以Esc键关闭. 可 ...

  5. FastReport Site授权联合推广计划 彻底保障商业化开发，还送iPhone 5s

    上月慧都与报表控件开发商Fastreport联合推出的优惠活动,获得中国开发者的巨大反响.本月慧都再次发力,与Fast Reports, Inc.联合推出FastReport Site授权推广计划.活 ...

  6. react-native 视频播放器（很不错哦）

    第一步: npm i -S react-native-af-video-player(安装前:先安装: react-native-video.react-native-keep-awake.react ...

  7. 微软RPC技术学习小结

    RPC,即Remote Procedure Call,远程过程调用,是进程间通信(IPC, Inter Process Communication)技术的一种.由于这项技术在自己所在项目(Window ...

  8. 【QT】【OpenCv】初始配置以及测试功能

    #include "mainwindow.h" #include "ui_mainwindow.h" #include<opencv2/core/core ...

  9. Properties的使用以及配置文件值的获取

    一.项目的部署如下,现在要获取SystemGlobals.properties中的值 二.代码如下: package com.util; import java.io.IOException; imp ...

  10. IDEA 打包jar

    1.ctrl+shift+alt+s 弹出项目设置窗口,点击Artifacts页签,点+号,选择jar Empty.修改jar name,将右侧需要打包进去的资源拖到左侧,记住Output direc ...