一、下载与安装

//全局安装webpack (不推荐)
npm i webpack -g
npm i webpack
-cli -g //局部安装(推荐)
npm i webpack -D
npm i webpack-cli -
D npx webpack -v 查看webpack的版本号 注:也可以使用cnpm安装。

二、webpack.config.js文件的配置

//webpack的配置文件,文件名不能改!!!
//万一想改的话,就是 npx wenpack --config webpack.con.js 后面的是更改后的名称
const path=require('path') //引入此模块的目的就是,配置出口文件和入口文件的根路径;
module.exports={
//'development' or 'production' 开发环境配置,第一个是开发环境,production是生产环境!!
mode:"development",
      devtool:'cheap-eval-source-map',  //映射错误
    //配置默认的出口文件/入口文件
//首先找到入口文件;
entry:{ //entry入口文件,一个入口文件的话直接写,别写main对象;
main:path.join(__dirname,'./index.js')
},
//出口文件;
output:{
filename:'bundle.js', //出口文件的名,随意;
path:path.join(__dirname,'./dist')
},
//module--模块解析,webpack因为只认识js
module:{
rules:[{
//正则表达式匹配
test:/\.css$/,
use:[
"style-loader", //语法解析;
"css-loader" //解析文件依赖;因为可能会有多个css文件
]
},
{
test:/\.styl$/ , //styl文件的配置;cnpm i stylus-loader stylus -D
use:[
"style-loader",
"css-loader",
"stylus-loader" , //解析成正常css;
//注意顺序规律,从下而上;不能乱;
]
},
//图片解析;
{
test:/\.(jpg|png|svg|gif|jpeg)$/,
use:[
{
loader:"url-loader", //解析图片和解析文件;
//cnpm i url-loader file-loader -D
//url-loader基于file-loader -D
options:{ //图片的配置项
limit:10240
//用来控制当前的文件大小,如果当前文件大小超过所设置的文件大小,会把文件生成一个新的文件插入到dist下,如果比当前所设置的小,会放到打包出来的文件下,以bate64位的形式;
}
}
]
},
]
}
} 注意:css-loader style-loader 这些都是需要安装的

 三、ES6转ES5   (babel中文文档)设置----webpack

const path = require('path');
//引入HTML插件;
const HtmlWebPackplugin = require('html-webpack-plugin')
//下载:npm install --save-dev html-webpack-plugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
//下载:cnpm i clean-webpack-plugin -D 会随着webpack版本的改变,配置方法也会改变。
module.exports = {
mode: 'development',
devtool:'cheap-eval-source-map', //映射错误
entry: {
main: path.join(__dirname, 'index.js'),
},
output: {
filename: 'es6.js',
path: path.join(__dirname, './dist'),
},
//模块解析;
module: {
rules: [
{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
]
},
  //es6转es5
//安装:npm install --save-dev babel-loader @babel/core 
     //npm install @babel/preset-env --save-dev
     //npm install --save @babel/polyfill  彻底转换成es5;还需单独在根目录文件下建一个 .babelrc 文件,见四配置,最后在入口文件(例如:index.js)还需引入 require("@babel/polyfill");  //哪里需要转就在哪里引入!!
            {
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
},
//插件,是一个数组。
plugins: [
new HtmlWebPackplugin({
template: "./index.html" //依那个HTML文件为模板,就在此写那个文件
}),
new CleanWebpackPlugin()
//注意插件的先后顺序!!!不能变;
]
}

 四、 .babelrc 文件的配置

{
"presets": [["@babel/preset-env",{
"useBuiltIns": "usage" //在哪用就在那里转;
}]]
}
直接复制到该文件里面即可!

webpack--前端自动化工具的更多相关文章

  1. webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

    接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 插件的介绍文档:https://www.npmjs.com/package/html-webpack-p ...

  2. 前端自动化工具gulp自动添加版本号

    之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时 ...

  3. 学习安装并配置前端自动化工具Gulp

    Gulp和所有Gulp插件都是基于nodeJs来运行的,因此在你的电脑上需要安装nodeJs,安装过程请移驾安装并配置前端自动化工具--grunt.安装完成后,通过运行cmd进入DOS命令窗口,如图: ...

  4. Node.js前端自动化工具:gulp

    前端自动化工具 -- gulp 使用简介 gulp是基于流的前端自动化构建工具. 之前也谈到了 grunt的用法,grunt其实就是配置+配置的形式. 而gulp呢,是基于stream流的形式,也就是 ...

  5. webpack前端构建工具学习总结(一)之webpack安装、创建项目

    npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...

  6. webpack前端构建工具学习总结(二)之loader的使用

    Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为 ...

  7. webpack前端自动化构建工具

    博主不易,不求赞赏,希望把自己遇到的难点写出来,以及希望自己能有能力写出一篇不错的博文. 前端构建工具本人 bootstrap+jquery用gulp vue+element 用webpack 本人最 ...

  8. 前端自动化工具 -- Gulp 使用简介

    gulp是基于流的前端自动化构建工具. 之前也谈到了 grunt的用法,grunt其实就是配置+配置的形式. 而gulp呢,是基于stream流的形式,也就是前一个函数(工厂)制造出结果,提供后者使用 ...

  9. gulp 前端自动化工具

    一开篇 在前端开发的过程中,我们经常会碰到压缩.合并.图片script 等,于是就有了gulp 前端自动化构建工具,它能帮你在前端开发中,节省时间. 1,安装 node.js 因为gulp 构建工具是 ...

  10. 前端自动化工具 -- gulp https://angularjs.org/

    gulp是基于流的前端自动化构建工具. gulp是基于stream流的形式,也就是前一个函数(工厂)制造出结果,提供后者使用. 同样的,也是包括基本用法和各插件的使用. 二.基本用法--插件使用 gu ...

随机推荐

  1. MVC的布局页,视图布局页和分布页的使用

    一,结构如下图 二,布局页和视图布局页 1>使用方法一 _ViewStart.cshtml @{ Layout = "~/Views/Shared/_Layout.cshtml&quo ...

  2. Python 第三天学习整理2

    一.常用的字符串方法 capitalize() #将字符串首字母大写 center(100,'*') #把字符串居中的 count(‘zhou’)#查询次数 endswith('.jpg ')#判断字 ...

  3. redis笔记3-命令

    通用命令:keys * --查询所有keykeys list* --查询list开头的keytype key1 --查询键对应的value类型del key --删除指定的keyttl key --查 ...

  4. React 滚动事件

    代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UT ...

  5. 使用conda部署jupyterhub以及ladp验证的安装

    前提:机器安装有conda环境 官方文档:http://jupyterhub.readthedocs.io/en/stable/quickstart.html 1.安装conda3 jupyterhu ...

  6. sql的分页

    public static string GetPageSql(string sql, int start, int end)        {            return string.Fo ...

  7. 如何在html中添加引用公共模块文件

    1.首先需要修改apache的配置文件: 打开httpd.conf 搜索“AddType text/html .shtml” 搜索结果: AddType text/html .shtml .html ...

  8. shell正则匹配IP地址

    IP分成5大类: A类地址 ⑴ 第1字节为网络地址,其它3个字节为主机地址. ⑵ 范围:1.0.0.1—126.155.255.254 ⑶ 私有地址和保留地址: ① 10.X.X.X是私有地址(只能在 ...

  9. TP model where条件丢失

    最近我修复了一个bug,这个bug是用户能看到所有用户的数据,经过排查发现是where条件丢失,导致查询语句直接查了所有数据. 但是代码并没有问题,然后查到了 ThinkPHP/Library/Thi ...

  10. 【进阶技术】一篇文章搞掂:Spring高级编程

    本文篇幅较长,建议合理利用右上角目录进行查看(如果没有目录请刷新). 本文基于<Spring5高级编程>一书进行总结和扩展,大家也可以自行研读此书. 十一.任务调度 任务调度主要由三部分组 ...