构建工具／grunt／gulp／parcel／webpack
1. Grunt
1.1 Grunt介绍
-
中文主页 : http://www.gruntjs.net/
-
是一套前端自动化构建工具，一个基于nodeJs的命令行工具
-
它是一个任务运行器, 配合其丰富强大的插件
-
常用功能:
- 合并文件(js/css)
- 压缩文件(js/css)
- 语法检查(js)
- less/sass预编译处理
- 其它...
-
安装nodejs, 查看版本
node -v -
创建一个简单的应用grunt_test
|- build----------构建生成的合并后文件所在的文件夹 |- dist-----------构建生成的压缩文件所在的文件夹 |- src------------源码文件夹 |- js---------------js源文件夹 |- less-------------less源文件夹 |- index.html-----页面文件 |- Gruntfile.js---grunt配置文件(注意首字母大写) |- package.json---项目包配置文件 { "name": "grunt_test", "version": "1.0.0" } -
全局安装 grunt-cli
npm install -g grunt-cli -
安装grunt
npm install grunt --save-dev -
运行构建项目命令
grunt //提示 Warning: Task "default" not found
1.2 配置文件: Gruntfile.js
-
此配置文件本质就是一个node函数类型模块
-
配置编码包含3步:
- 初始化插件配置
- 加载插件任务
- 注册构建任务
-
基本编码:
module.exports = function(grunt){ // 1. 初始化插件配置 grunt.initConfig({ //主要编码处 }); // 2. 加载插件任务 grunt.loadNpmTasks('grunt-contrib-concat'); // 3. 注册构建任务 grunt.registerTask('default', []); }; -
命令: grunt //提示成功, 但没有任何效果(还没有使用插件定义任务)
1.3 Grunt插件介绍
-
grunt官网的插件列表页面 http://www.gruntjs.net/plugins
-
插件分类:
- grunt团队贡献的插件 : 插件名大都以contrib-开头
- 第三方提供的插件 : 大都不以contrib-开头
-
常用的插件:
- grunt-contrib-clean——清除文件(打包处理生成的)
- grunt-contrib-concat——合并多个文件的代码到一个文件中
- grunt-contrib-uglify——压缩js文件
- grunt-contrib-jshint——javascript语法错误检查；
- grunt-contrib-cssmin——压缩/合并css文件
- grunt-contrib-htmlmin——压缩html文件
- grunt-contrib-imagemin——压缩图片文件(无损)
- grunt-contrib-copy——复制文件、文件夹
- grunt-contrib-watch——实时监控文件变化、调用相应的任务重新执行
-
Gruntfile.js---grunt配置文件(注意首字母大写)（课堂配置）
/* 运行grunt指令，会去加载读取的配置文件 */ module.exports = function (grunt) { //此模块被调用时，会注入一个实参进来，要申明形参接受 // 1. 初始化插件配置 grunt.initConfig({ babel: { //配置任务名 options: { //配置选项 sourceMap: false, presets: ['es2015'] }, dist: { files: [{ expand:true, //如果设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名。 cwd:'src/', //js目录下 src:['**/*.js'], //所有js文件 dest:'build/' //输出到此目录下 }] } }, jshint: { options: { "curly": true, "eqnull": true, "eqeqeq": true, // "undef": true, "esversion": 6, "globals": { "jQuery": true } }, all: ['Gruntfile.js','src/js/*.js'] //检查的所有文件 }, concat: { options: { separator: ';', //连接符 }, dist: { src: ['build/js/module1.js', 'build/js/module2.js'], //指定要合并哪些文件 dest: 'build/js/built.js', //合并的文件输出哪去 }, }, pkg: grunt.file.readJSON('package.json'), //读取package.json文件 uglify: { options: { banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %> */' //向压缩文件最上面添加一些注释信息 }, my_target: { files: { 'dist/js/dist.min.js': ['build/js/built.js'] } } }, less: { //将less文件编译成css文件，将编译后的文件合并成一个文件 production: { options: { paths: ['build/css'], plugins: [ new (require('less-plugin-autoprefix'))({browsers: ["last 2 versions", "> 5%", "Firefox > 20", "ie 6-8"]}) ] }, files: { 'build/css/built.css': 'src/less/*.less' } } }, cssmin: { options: { mergeIntoShorthands: false, //禁止合并css属性 roundingPrecision: false //不去四舍五入 }, target: { files: { 'dist/css/dist.min.css': ['build/css/built.css'] } } }, htmlmin: { dist: { options: { removeComments: true, //移除注释 collapseWhitespace: true //移除多余的空格 }, files: { 'dist/index.html': 'src/index.html' } } }, watch: { scripts: { //监视js文件 files: ['src/js/*.js'], //监视的文件 tasks: ['jshint', 'babel', 'concat', 'uglify'], //一旦监视的文件发生改变，就会自动执行任务列表中的任务 options: { spawn: false //加快任务速度 }, }, css: { files: 'src/less/*.less', tasks: ['less', 'cssmin'], options: { spawn: false //加快任务速度 }, }, html: { files: 'src/index.html', tasks: ['htmlmin'], options: { spawn: false //加快任务速度 }, }, }, }); // 2. 加载插件任务 grunt.loadNpmTasks('grunt-babel'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-less'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-htmlmin'); grunt.loadNpmTasks('grunt-contrib-watch'); // 3. 注册构建任务 grunt.registerTask('default', ['jshint', 'babel', 'concat', 'uglify', 'less', 'cssmin', 'htmlmin']); //执行顺序从左到右，同步的 grunt.registerTask('myWatch', ['default', 'watch']); }; -
命令:
grunt myWatch //控制台提示watch已经开始监听, 修改保存后自动编译处理
2. Gulp
2.1 Gulp介绍
-
gulp是与grunt功能类似的前端项目构建工具, 也是基于Nodejs的自动任务运行器
-
能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的
合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务 -
gulp更高效(异步多任务), 更易于使用, 插件高质量
-
安装 nodejs, 查看版本: node -v
-
创建一个简单的应用gulp_test
|- dist |- build |- src |- js |- less |- css |- index.html |- gulpfile.js-----gulp配置文件 |- package.json { "name": "gulp_test", "version": "1.0.0" } -
安装gulp:
- 全局安装gulp
npm install gulp -g - 局部安装gulp
npm install gulp --save-dev - 配置编码: gulpfile.js
//引入gulp模块 var gulp = require('gulp'); //定义默认任务 gulp.task('任务名', function() { // 将你的任务的任务代码放在这 }); gulp.task('default', ['任务'])//异步执行 - 构建命令:
gulp
- 全局安装gulp
2.2 使用gulp插件
- 相关插件:
- gulp-concat : 合并文件(js/css)
- gulp-uglify : 压缩js文件
- gulp-rename : 文件重命名
- gulp-less : 编译less
- gulp-clean-css : 压缩css
- gulp-livereload : 实时自动编译刷新
- 重要API
- gulp.src(filePath/pathArr) :
- 指向指定路径的所有文件, 返回文件流对象
- 用于读取文件
- gulp.dest(dirPath/pathArr)
- 指向指定的所有文件夹
- 用于向文件夹中输出文件
- gulp.task(name, [deps], fn)
- 定义一个任务
- gulp.watch()
- 监视文件的变化
- gulp.src(filePath/pathArr) :
- 处理js
- 创建js文件
- src/js/test1.js
(function () { function add(num1, num2) { return num1 + num2; } console.log(add(10, 30)); })(); - src/js/test2.js
(function () { var arr = [2,3,4].map(function (item, index) { return item+1; }); console.log(arr); })();
- src/js/test1.js
- 下载插件:
npm install jshint gulp-jshint gulp-concat gulp-uglify gulp-rename babel-core babel-preset-es2015 gulp-babel --save-dev - 配置编码
//引入gulp模块 const gulp = require('gulp'); const jshint = require('gulp-jshint'); const babel = require('gulp-babel'); const concat = require('gulp-concat'); const uglify = require('gulp-uglify'); const rename = require("gulp-rename"); //定义默认任务 gulp.task('jslint', function() { // 将你的任务的任务代码放在这 return gulp.src('.src/js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); }); gulp.task('babel', ['jslint'], function () { return gulp.src('src/js/*.js') .pipe(babel({ presets: ['es2015'] })) .pipe(gulp.dest('build/js')) }); gulp.task('minifyjs', ['babel'], function () { return gulp.src('build/js/*.js') .pipe(concat('built.js')) .pipe(gulp.dest('build/js')) .pipe(uglify()) .pipe(rename('dist.min.js')) .pipe(gulp.dest('dist/js')) }); //注册执行任务 gulp.task('default', ['minifyjs'])//异步执行 - 页面引入js浏览测试 : index.html
<script type="text/javascript" src="dist/js/dist.min.js"></script> - 打包测试: gulp
- 创建js文件
- 处理css
- 创建less文件
- src/less/test1.less
#box1{ width: 100px; height: 150px; background: pink; p { color: #fff; font-size: 30px; } } - src/less/test2.less
#box2{ width: 200px; height: 200px; background: deeppink; p { color: deepskyblue; display: flex; } }
- src/less/test1.less
- 下载插件:
npm install gulp-less gulp-clean-css --save-dev - 配置编码
const less = require('gulp-less'); const LessAutoprefix = require('less-plugin-autoprefix'); const autoprefix = new LessAutoprefix({ browsers: ['last 2 versions'] }); const cleanCSS = require('gulp-clean-css'); gulp.task('less', function () { return gulp.src('src/less/*.less') .pipe(less({ plugins: [autoprefix] })) .pipe(gulp.dest('build/css')) }); gulp.task('css', ['less'], function () { return gulp.src('build/css/*.css') .pipe(concat('dist.min.css')) .pipe(cleanCSS({compatibility: 'ie8'})) .pipe(gulp.dest('dist/css')) }); gulp.task('default', ['minifyjs', 'css']); - 页面引入css浏览测试 : index.html
<link rel="stylesheet" href="dist/css/dist.min.css"> <div id="box1"><p>hello</p></div> <div id="box2"><p>atguigu</p></div> - 打包测试: gulp
- 创建less文件
- 处理html
- 下载插件:
npm install gulp-htmlmin --save-dev - 配置编码
var htmlmin = require('gulp-htmlmin'); //压缩html任务 gulp.task('html', function() { return gulp.src('index.html') .pipe(htmlmin({collapseWhitespace: true, removeComments: true})) .pipe(gulp.dest('dist')) }); gulp.task('default', ['minifyjs', 'css', 'html']); - 修改页面引入
<link rel="stylesheet" href="css/dist.min.css"> <script type="text/javascript" src="js/dist.min.js"></script> - 打包测试: gulp
- 下载插件:
- 自动编译
-
下载插件
npm install gulp-livereload --save-dev -
配置编码:
var livereload = require('gulp-livereload'); //所有的pipe .pipe(livereload()); gulp.task('watch', ['default'], function () { //开启监视 livereload.listen(); //监视指定的文件, 并指定对应的处理任务 gulp.watch('src/js/*.js', ['minifyjs']) gulp.watch(['src/css/*.css','src/less/*.less'], ['cssTask','lessTask']); }); -
热加载(实时加载)
- 下载插件：gulp-connect
1、 npm install gulp-connect --save-dev 2、 注册 热加载的任务 server，注意依赖build任务 3、注册热加载的任务 //配置加载的选项 connect.server({ root : 'dist/',//提供服务的根路径 livereload : true,//是否实时刷新 port : 5000//开启端口号 }); // 自动开启链接 open('http://localhost:5000');//npm install open --save-dev // 监视目标文件 gulp.watch('src/js/*.js', ['js']); gulp.watch(['src/css/*.css', 'src/css/*.less'], ['cssMin', 'less']);
-
2.3 扩展
- 打包加载gulp插件
- 前提：将插件下载好。
- 下载打包插件： gulp-load-plugins
- npm install gulp-load-plugins --save-dev
- 引入： var $ = require('gulp-load-plugins')();！！！引入的插件是个方法，必须记住调用。
- 神来之笔：其他的插件不用再引入了
- 使用方法：
* 所有的插件用 $ 引出，其他插件的方法名统一为插件的功能名字(即插件名字的最后一部分)：如：concat,connect,cssmin... gulp.task('lib', function() { gulp.src('bower_components/**/*.js') .pipe(gulp.dest(app.devPath + 'vendor')) .pipe(gulp.dest(app.prdPath + 'vendor')) .pipe($.connect.reload()); });
2.4 gulpfile.js(课堂配置)
//引入gulp模块
const gulp = require('gulp');
const $ = require('gulp-load-plugins')();
/*const jshint = require('gulp-jshint');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const rename = require("gulp-rename");
const less = require('gulp-less');*/
const LessAutoprefix = require('less-plugin-autoprefix');
const autoprefix = new LessAutoprefix({ browsers: ['last 2 versions'] });
/*const cssmin = require('gulp-cssmin');
const htmlmin = require('gulp-htmlmin');
const livereload = require('gulp-livereload');
const connect = require('gulp-connect');*/
const open = require('open');
const opn = require('opn'); //可以自动开启游览器
/*
任务如果指定了 return 那么这个任务就是个异步的任务
如果没有指定 return 那么这个任务就是个同步的任务
*/
//定义默认任务
/*gulp.task('jshint', function() {
// 将你的任务的任务代码放在这
return gulp.src('./src/js/!*.js') //将指定目录下的文件以数据流的方式导入到gulp内存中
.pipe(jshint({esversion: 6})) //检查js语法错误
.pipe(jshint.reporter('default')); //使用默认的错误提示
});
gulp.task('babel', ['jshint'], function () { //中间数组作用：先执行数组中的任务，在执行本身的任务
return gulp.src('./src/js/!*.js')
.pipe(babel({ //语法转换 es6-es5
presets: ['es2015']
}))
.pipe(gulp.dest('build/js')) //将gulp内存中的数据流输出指定目录下
})
gulp.task('concat', ['babel'], function () {
return gulp.src(['./build/js/module1.js', './build/js/module2.js'])
.pipe(concat('built.js')) //合并所有js文件并命名
.pipe(gulp.dest('./build/js'))
})
gulp.task('uglify', ['concat'], function () {
return gulp.src('./build/js/built.js')
.pipe(uglify()) //压缩js代码
.pipe(rename('dist.min.js')) //重命名js文件
.pipe(gulp.dest('./dist/js/'))
})*/
// 检查语法错误 -- 进行语法转换 -- 合并js文件 -- 压缩js文件
gulp.task('minifyjs', function () {
return gulp.src('./src/js/*.js')
.pipe($.jshint({esversion: 6})) //检查js语法错误
.pipe($.jshint.reporter('default')) //使用默认的错误提示
.pipe($.babel({ //语法转换 es6-es5
presets: ['es2015']
}))
.pipe(gulp.dest('build/js'))
.pipe($.concat('built.js')) //合并所有js文件并命名
.pipe(gulp.dest('./build/js'))
.pipe($.uglify()) //压缩js代码
.pipe($.rename('dist.min.js')) //重命名js文件
.pipe(gulp.dest('dist/js'))
.pipe($.livereload())
})
gulp.task('minifycss', function () {
return gulp.src('src/less/*.less')
.pipe($.less({ //将less文件编译成css文件
plugins: [autoprefix] //增加前缀
}))
.pipe(gulp.dest('build/css'))
.pipe($.concat('built.css')) //合并css文件
.pipe(gulp.dest('build/css'))
.pipe($.cssmin()) //压缩css
.pipe($.rename('dist.min.css'))
.pipe(gulp.dest('./dist/css'))
.pipe($.livereload())
})
gulp.task('minifyhtml', function () {
return gulp.src('src/index.html')
.pipe($.htmlmin({
removeComments: true,
collapseWhitespace: true
}))
.pipe(gulp.dest('dist'))
.pipe($.livereload())
})
gulp.task('watch', ['default'], function () {
$.livereload.listen();
//配置热更新/热加载
$.connect.server({
root: 'dist', //访问目录
livereload: true,
port: 3000
});
//打开网页
opn('http://localhost:3000');
//配置监视任务
gulp.watch('./src/js/*.js', ['minifyjs'])
gulp.watch('./src/less/*.less', ['minifycss'])
gulp.watch('./src/index.html', ['minifyhtml'])
})
gulp.task('default', ['minifyjs', 'minifycss', 'minifyhtml'])//异步执行
3. parcel
快速、零配置的 Web 应用程序打包器
目前，Parcel 构建速度快，但 Parcel 输出文件大
Parcel 内置了一个开发服务器，这会在你更改文件时自动重建你的应用程序，并支持模块热替换 ，以便你快速开发。你只需指定入口文件即可：
parcel index.html -p 3000
中文主页: http://www.css88.com/doc/parcel/
4. webpack快速入门教程
1、了解Webpack相关
* 什么是webpack
* Webpack是一个模块打包器(bundler)。
* 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理
* 它将根据模块的依赖关系进行静态分析，生成对应的静态资源
* 四个核心概念
* Entry：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
* Output：output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。
* Loader：loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只能解析 JavaScript）。
* Plugins：插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
* 理解Loader
* Webpack 本身只能加载JS/JSON模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载
* Loader 本身也是运行在 node.js 环境中的 JavaScript 模块
* 它本身是一个函数，接受源文件作为参数，返回转换的结果
* loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 json-loader。
* 理解Plugins
* 插件件可以完成一些loader不能完成的功能。
* 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。
* CleanWebpackPlugin: 自动清除指定文件夹资源
* HtmlWebpackPlugin: 自动生成HTML文件并
* UglifyJSPlugin: 压缩js文件
* 配置文件(默认)
* webpack.config.js : 是一个node模块，返回一个 json 格式的配置信息对象
2、学习文档 :
- webpack官网: http://webpack.github.io/
- webpack3文档(英文): https://webpack.js.org/
- webpack3文档(中文): https://doc.webpack-china.org/
3、开启项目
- 初始化项目：
-
- 生成package.json文件
{ "name": "webpack_test", "version": "1.0.0" }
-
- 安装webpack
- npm install webpack -g //全局安装
- npm install webpack --save-dev //局部安装
4、编译打包应用
- 创建入口src/js/ : entry.js
- document.write("entry.js is work");
- 创建主页面: dist/index.html
- <script type="text/javascript" src="bundle.js"></script>
- 编译js
- webpack src/js/entry.js dist/bundle.js
- 查看页面效果
5、添加js/json文件
* 创建第二个js: src/js/math.js
```
export function square(x) {
return x * x;
}
export function cube(x) {
return x * x * x;
}
```
* 创建json文件: src/json/data.json
```
{
"name": "Tom",
"age": 12
}
```
* 更新入口js : entry.js
```
import {cube} from './math'
import data from '../json/data.json'
//注意data会自动被转换为原生的js对象或者数组
document.write("entry.js is work <br/>");
document.write(cube(2) + '<br/>');
document.write(JSON.stringify(data) + '<br/>')
```
* 编译js:
```
webpack src/js/entry.js dist/bundle.js
```
* 查看页面效果
6、使用webpack配置文件
* 创建webpack.config.js
```
const path = require('path'); //path内置的模块，用来设置路径。
module.exports = {
entry: './src/js/entry.js', // 入口文件
output: { // 输出配置
filename: 'bundle.js', // 输出文件名
path: path.resolve(__dirname, 'dist') //输出文件路径配置
}
};
```
* 配置npm命令: package.json
```
"scripts": {
"build": "webpack"
},
```
* 打包应用
```
npm run build
```
7、打包css和图片文件
- 安装样式的loader
```
npm install css-loader style-loader --save-dev
npm install file-loader url-loader --save-dev
补充：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。
```
-
配置loader
module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { outputPath: 'images/', //决定输出文件的位置 publicPath: '../images/', limit: 8 * 1024, // 8kb大小以下的图片文件都用base64处理 } } ] } ] } -
向应用中添加2张图片:
- 小图: img/logo.png
- 大图: img/big.jpg
-
创建样式文件: src/css/test.css
body { background: url('../img/logo.jpg') } -
更新入口js : entry.js
- import '../css/test.css'
-
添加css样式
box1{
width: 300px; height: 300px; background-image: url("../image/logo.jpg"); } #box2{ width: 300px; height: 300px; background-image: url("../image/big.jpg"); } -
index.html添加元素
<div id="box1"></div>
<div id="box2"></div> -
执行打包命令：
npm run build
8、优化css
将style样式改为link标签引入css
* 安装插件
npm install --save-dev extract-text-webpack-plugin
* 引入插件（插件都需要引入）
const ExtractTextPlugin = require("extract-text-webpack-plugin")
* 配置Plugins
plugins: [
new ExtractTextPlugin({
filename: 'css/[name].css'
})
]
* 修改loader
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: 'css-loader'
})
}
9、打包html文件
将html文件也打包过去
* 安装插件
npm install --save-dev clean-webpack-plugin
* 引入插件（插件都需要引入）
const CleanWebpackPlugin = require('clean-webpack-plugin')
* 配置Plugins
new HtmlWebpackPlugin({ //html加载
filename: 'index.html',
template: 'src/index.html',
})
10、清除打包文件
打包时将之前的文件夹清空，防止之前的文件干扰
* 安装插件
npm install --save-dev html-webpack-plugin
* 引入插件（插件都需要引入）
const HtmlWebpackPlugin = require('html-webpack-plugin');
* 配置Plugins
new CleanWebpackPlugin('build', {
root: path.resolve(__dirname, '../')
})
以上就是build环境下的设置，可以生成打包后的文件
命令配置 "build" : "webpack --config webpack.config.build.js"
11、自动编译打包
* 利用webpack开发服务器工具: webpack-dev-server@2
* 下载
- npm install --save-dev webpack-dev-server
* webpack配置
devServer:{//配置此静态文件服务器，可以用来预览打包后项目
contentBase: path.resolve(__dirname, 'dist'), //开发服务运行时的文件根目录
host: 'localhost', //主机地址
port: 8080, //端口号
open: true //是否自动打开浏览器
}
* 命令配置
- "dev": "webpack-dev-server --config webpack.config.dev.js"
* 编译打包应用并运行
- npm run dev
以上就是dev环境下的设置，可以自动在内存中生成打包后的文件并打开网页检查效果，有热更新功能。
12、扩展css前缀
* 下载
npm install --save-dev postcss-loader
* 配置文件
* 文件名： postcss.config.js
* 内容：
module.exports = {
"plugins": {
"autoprefixer": {
"browsers": [
"ie >= 8",
"ff >= 30",
"chrome >= 34",
"safari >= 7",
"opera >= 23"
]
}
}
}
* 修改loader
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ['css-loader', 'postcss-loader']
})
}
13、压缩css
* 修改loader
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: 'css-loader',
options: {
minimize: true //css压缩
}
}, 'postcss-loader',]
})
}
14、JS语法转化
* 下载
npm install --save-dev babel-core babel-loader babel-preset-es2015
* 修改loader
{
test: /\.js$/,
exclude: /node_modules/, //忽略文件
loader: 'babel-loader',
query: {
presets: [
require.resolve('babel-preset-es2015')
]
}
}
15、JShint检测
* 下载
npm install --save-dev jshint jshint-loader
* 修改loader
{
test: /\.js$/, // 涵盖 .js 文件
enforce: "pre", // 预先加载好 jshint loader
exclude: /node_modules/, // 排除掉 node_modules 文件夹下的所有文件
use: [{
loader: "jshint-loader",
options: {
// 查询 jslint 配置项，请参考 http://www.jshint.com/docs/options/
// 例如
camelcase: true,
//jslint 的错误信息在默认情况下会显示为 warning（警告）类信息
//将 emitErrors 参数设置为 true 可使错误显示为 error（错误）类信息
emitErrors: true,
//jshint 默认情况下不会打断webpack编译
//如果你想在 jshint 出现错误时，立刻停止编译
//请设置 failOnHint 参数为true
failOnHint: true,
esversion: 6
}
}
16、压缩JS
* 下载
npm install --save-dev uglifyjs-webpack-plugin
* 引入plugins
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
* 配置plugins
new UglifyJsPlugin()
17、压缩html
* 修改plugins
new HtmlWebpackPlugin({ //html加载及压缩
filename: 'index.html',
template: './src/index.html',
minify: {
removeComments: true,
collapseWhitespace: true
}
})
以上就是prod环境下的设置，可以生成打包、压缩、语法转换等的文件
命令配置 "prod" : "webpack --config webpack.config.prod.js"
5. webpack附加
5.1 - webpack.config.build.js
/*
webpack的配置文件，当你执行webpack默认找到配置文件webpack.config.js
通过 webpack --display-modules 能查看所有任务执行情况
*/
const {resolve} = require('path');
//提取css成单独的文件
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//创建一个html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//清除指定目录
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
//入口
entry: './src/js/app.js',
//输出
output: {
path: resolve(__dirname, '../build'), //输出目录
filename: './js/built.js' //输出文件名
},
//配置loader
module: {
rules: [
/* { //配置规则
test: /\.less$/, //规则处理的文件
use: [{ //遇到要处理的文件，通过use中的loader处理指定文件（执行顺序从右往左）
loader: "style-loader" // 会在html文件中，将js中css样式生成一个style标签插入页面中去
}, {
loader: "css-loader" // 将css变成js中一个模块（commonjs的模块化语法）
}, {
loader: "less-loader" // 将less编译成css
}]
},*/
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
//如果需要，可以在 less-loader 之前将 resolve-url-loader 链接进来
use: ['css-loader', 'less-loader']
})
},
/*{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
publicPath: './build/images', //样式中图片的路径
outputPath: './images' //输出的文件路径
}
}
]
}*/
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192, // 8 * 1024 8kb大小以下的图片转化为base64格式
publicPath: '../images', //样式中图片的路径
outputPath: './images' //输出的文件路径
}
}
]
}
]
},
//配置插件
plugins: [
new ExtractTextPlugin("./css/built.css"),
new HtmlWebpackPlugin({
filename: 'index.html', //文件名
template: 'src/index.html' //以指定html文件为模板去创建html文件
}),
new CleanWebpackPlugin('../build', { //不遵循output输出目录
allowExternal: true //允许清除根目录以外的文件夹
})
],
devtool: 'inline-source-map'
}
5.2 - webpack.config.dev.js
/*
webpack的配置文件，当你执行webpack默认找到配置文件webpack.config.js
通过 webpack --display-modules 能查看所有任务执行情况
*/
const {resolve} = require('path');
//提取css成单独的文件
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//创建一个html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//清除指定目录
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
//入口
entry: ['./src/js/app.js', './src/index.html'], //刷新了html页面
//输出
output: {
path: resolve(__dirname, '../build'), //输出目录
filename: './js/built.js' //输出文件名
},
//配置loader
module: {
rules: [
{ //配置规则
test: /\.less$/, //规则处理的文件
use: [{ //遇到要处理的文件，通过use中的loader处理指定文件（执行顺序从右往左）
loader: "style-loader" // 会在html文件中，将js中css样式生成一个style标签插入页面中去
}, {
loader: "css-loader" // 将css变成js中一个模块（commonjs的模块化语法）
}, {
loader: "less-loader" // 将less编译成css
}]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192, // 8 * 1024 8kb大小以下的图片转化为base64格式
publicPath: '../images', //样式中图片的路径
outputPath: './images' //输出的文件路径
}
}
]
},
{
test: /\.html$/,
use: ['html-loader']
}
]
},
//配置插件
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html', //文件名
template: 'src/index.html' //以指定html文件为模板去创建html文件
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
//服务器实现热更新
devServer: {
contentBase: __dirname,
compress: true, //以gzip格式压缩
port: 3000, //端口号
open: true, //自动打开网页
hot: true //开启热模替换功能
}
}
5.3 - webpack.config.prod.js
/*
webpack的配置文件，当你执行webpack默认找到配置文件webpack.config.js
通过 webpack --display-modules 能查看所有任务执行情况
*/
const {resolve} = require('path');
//提取css成单独的文件
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//创建一个html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//清除指定目录
const CleanWebpackPlugin = require('clean-webpack-plugin');
//压缩js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
//入口
entry: './src/js/app.js',
//输出
output: {
path: resolve(__dirname, '../dist'), //输出目录
filename: './js/[name].[hash:7].js' //输出文件名
},
//配置loader
module: {
rules: [
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
//如果需要，可以在 less-loader 之前将 resolve-url-loader 链接进来
use: [{
loader: 'css-loader',
options: {
minimize: true //启用压缩css
}
}, 'postcss-loader', 'less-loader']
})
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192, // 8 * 1024 8kb大小以下的图片转化为base64格式
publicPath: '../images', //样式中图片的路径
outputPath: './images' //输出的文件路径
}
}
]
},
{
test: /\.js$/, // 涵盖 .js 文件
enforce: "pre", // 预先加载好 jshint loader
exclude: /node_modules/, // 排除掉 node_modules 文件夹下的所有文件
use: [{
loader: "jshint-loader",
options: {
// 查询 jslint 配置项，请参考 http://www.jshint.com/docs/options/
// 例如
camelcase: true,
//jslint 的错误信息在默认情况下会显示为 warning（警告）类信息
//将 emitErrors 参数设置为 true 可使错误显示为 error（错误）类信息
emitErrors: true,
//jshint 默认情况下不会打断webpack编译
//如果你想在 jshint 出现错误时，立刻停止编译
//请设置 failOnHint 参数为true
failOnHint: true,
esversion: 6
}
}]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
]
},
//配置插件
plugins: [
new ExtractTextPlugin("./css/[name].[hash:7].css"),
new HtmlWebpackPlugin({
filename: 'main.[hash:7].html', //文件名
template: 'src/index.html', //以指定html文件为模板去创建html文件
minify: { //压缩html
collapseWhitespace: true,
removeComments: true
}
}),
new CleanWebpackPlugin('../dist', { //不遵循output输出目录
allowExternal: true //允许清除根目录以外的文件夹
}),
new UglifyJsPlugin()
],
}
网友评论