一、下载与安装

//全局安装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. vue证明题四,使用组件

    vue的开发方式,基本上是以组件为主的,至于为啥,我也不好去论述,网上看别人的 所谓渐进式开发,也是源自于单页面应用这一说,而注册一个域名以后,指定了首页,爬虫爬取链接都是从首页开始的 如果一个网址, ...

  2. linux用户的基本操作2 用户密码管理

    目录 linux系统的基本用户操作2 用户的扩展知识 用户密码管理 linux系统的基本用户操作2 3)使用userdel删除账户 语法 : userdel [-r] username -r 同时删除 ...

  3. 发布并开源自己的一款 基于.Net 4.0 及 netstandard2.0 的 ORM 框架

    这款ORM框架的原版在经历过大概十几个项目的磨合,最近整理了一下,原名字为:ZhCun.Framework ,该框架辗转跟了我去过几家公司,大概从2012年出现第一个版本,当时就为简化数据库操作,从优 ...

  4. 三、Centos7安装Mysql

    1.到服务器下载的链接 wget https://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm 2.执行命令 sudo r ...

  5. 对struct typedef *的认识

    typedef struct node { ……… }NODE,*PNODE; 应该等价于 typedef struct node NODE;//struct node = NODE,eg:struc ...

  6. PHP closedir() 函数

    打开一个目录,读取它的内容,然后关闭: <?php$dir = "/images/"; // Open a directory, and read its contentsi ...

  7. SysTick功能总结

    一.初始化SysTick 按1ms来设置systick,也可以除以1000000.按1us来设置 SysTick_Config(SystemCoreClock / 1000); //SysTick开启 ...

  8. TP model where条件丢失

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

  9. 学习.net的步骤

    第一步 学习HTML与CSS 这并不需要去学一大堆的诸如Dreamweaver,Firework之类的各种网页设计工具,关键是理解HTML网页嵌套的block结构与CSS的box模型.许多ASP.NE ...

  10. 最短路 Dijkstra模板

    普通dijkstra,复杂度O(n*n) #include<bits/stdc++.h> using namespace std; int n,m,f[105][105],dis[105] ...