webpack    记得 --save-dev 装入开发依赖

更新迭代快,需要有根据报错解决问题的能力,来融会贯通这个工具

这里的是 webpack3,其实已经到了 webpack4 了

采用了 webpack 以后,就相当于一个工程化的项目(自动化工程项目)

  • 需求:
  • html、css、js 代码检错
  • ES6 转 ES5
  • flex、css 这样的前缀兼容
  • html、css、js 代码合并压缩
  • 图片处理
  • 热更新实时刷新页面
  • 什么是 webpack

模块打包工具,将所有的 前端资源文件 作为模块处理

根据模块的依赖关系,进行静态分析,生成静态资源

脚手架 ---- (vue、react 有自己的脚手架)

  • 核心概念

entry 入口 ---- 开始分析 的模块

output 输出 ---- 分析完了放在哪儿,在哪儿创建 bundles 目标文件,默认值是 ./dist

webpack 本身只识别处理 js 和 json,其他文件处理不了,需要 loader 甚至 plugins

loader ---- webpack 处理不了的,让 loader 处理

(比如 解决识别不了 less 引入的问题)

先去 官网找,再去 npm 找 loader

plugins 插件 ---- 处理 loader 也处理不了的

  • 文件夹 功能分析

src ---- 生鸡蛋、生大米 ---- 最开始的源代码

build ---- 熟鸡蛋、熟大米 ---- 简单的编译并合并代码 (4 个 css 合并成了 1 个 css 资源)

| dev ---- 模拟器 (模拟做饭) ---- 开发环境部署 (把 项目 借助 webpack 用自己配置的服务器 部署起来运行)

dist ---- 蛋炒饭 ---- 最终经过编译、压缩、语法检查等操作之后给生产环境的代码

  • 基本使用:

安装:

npm install webpack@3 -g

npm install webpack@3 --save-dev

webpack src/js/index build/index.js        // 第一次使用 webpack,自动生成 build 文件夹

从此 js、json、less 等文件都可以引入 build/index.js 入口文件

import '../less/demo.less';

import img from './img/react.img';

build/index.js 可以直接运行,其中 json 引入时自动转成了 对象

问题:

箭头函数 未被转换

  • 项目脚手架搭建

----------------- 1 ----------------> 使用 webpack 核心配置文件

npm install less-loader --save-dev    // 1. 解析 less

npm install css-loader --save -D    // 2. 把 css 变成一个 webpack 可识别的模块

npm install style-loader --save -D    // 3. 生成 <style> 并嵌入 html 中

npm install file-loader --save-dev    // 解析 png、jpg、gif 图片

npm install url-loader --save-dev    // 替代 file-loader

use:[

...

limit: 8192    // 当图片 小于 8kb 时,将图片变成 base64 编码

 ]

1. 创建 webpack.config.js 核心配置文件    // 固定写法

const path = require('path');    // node 内置模块

module.exports = {

entry: './src/js/index.js',    // 整个 js 的入口文件,webpack 的入口文件

output: {        // 输出配置

path: path.resolve(__dirname, ‘build’),    // 输出文件路径配置

filename: 'index.js'    // 输出的文件名

},

module: {

rules: [

{   test: /\.less$/,    // 编译 less ----> css

use:[

{loader: "style-loader"},    // 3. 生成 <style> 并嵌入 html 中

{loader: "css-loader"},    // 2. 把 css 变成一个 webpack 可识别的模块

{loader: "less-loader"}   // 1. 编译 less 成 css

]

},

{   test: "/\.(png|jpg|gif)$/"   // 处理图片资源

user: [

loader: 'url-loader',

options: {

outputPath: 'img',    // 图片最终输出的位置

publicPath: '../build/img',    // css 资源图片路径

name: '[hash:5].[ext]'    // 修改图片名称

limit: 8192    // 当图片小于 8kb 时,将图片转换为 base64

}

]

}

]

}

}

2. 一条命令: webpack 或者 webpack --display-modules

------------------ 2 ----------------> 使用插件

ExtractTextWebpackPlugin

npm install --save-dev extract-text-webpack-plugin

---------------------------------------

const path = require('path');

// 1. 安装插件

// 编译 less 为 css ,合并 css,再将 css 提取为一个单独的文件

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {

entry: './src/js/index.js',

output: {

path: path.resolve(__dirname, ‘build’),

filename: 'index.js'

},

module: {

rules: [

{   test: /\.less$/,

use: ExtractTextPlugin.extract({    // 2. 设置图片解析

fallback: "style-loader",

use: ["css-loader", "less-loader"]

})

},

{   test: "/\.(png|jpg|gif)$/",

user: [

loader: 'url-loader',

options: {

outputPath: 'img',

publicPath: '../img',    // 3. less 文件与 img 文件的相对路径

name: '[hash:5].[ext]'

limit: 8192

}

]

}

]

},

plugins: [

new ExtractTextPlugin("./css/styles.css")    // 4. 实例化一个对象,指定生成路径

]

}

------------------- 3 ---------------> 语法检查 jshint-loader

webStorm 集成工具一般不用,因为协同开发配置可能不统一,导致不必要的错误

npm install --save  jshint-loader -D    // 添加到开发依赖

npm audit fix

npm install --save jshint -D    // 添加到开发依赖

npm audit fix

前期 2 ----> 7 后期

---------------------------------------

webpack.config.js

  • const {resolve} = require('path');
    const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = {
    entry: './src/js/index.js',
    output: {
    path: resolve(__dirname, 'build/js/'), // 输出到 build/js
    filename: "index.js" // js 输出文件
    },
    module: {
    rules: [
    { // less 编译成 css,
    test: /\.less$/,
    use: ExtractTextPlugin.extract({
    fallback: "style-loader",
    use: ["css-loader", "less-loader"]
    })
    },
    { // loader 让 webpack 处理图片,并有 base64 功能
    test: /\.(png|jpg|gif)$/,
    use: [
    {
    loader: "url-loader",
    options:{
    outputPath: '../img', // build/js
    publicPath: '../img', // build/css/styles.css
    name:'[hash:5].[ext]',
    limit: 8192
    }
    }
    ]
    },
    { // js 检错功能
    test: /\.js$/, // 覆盖 .js 文件
    enforce: "pre", // 预先加载好 jshint-loader
    exclude: /node_modules/, // 排除掉 node_modules 文件夹下的所有文件
    use: [
    {
    loader: "jshint-loader",
    options: { //camelcase 已经弃用了
    // jslint 的错误信息在默认情况下会显示为 warning(警告)类信息
    // 将 emitErrors 参数设置为 true 可使错误显示为 error(错误)类信息
    emitErrors: false, // jshint 默认情况下不会打断 webpack 编译
    //如果你想在 jshint 出现错误时,立刻停止编译, 设置 failOnHint 参数为 true
    failOnHint: false,
                                esversion: 6
                            }
    }
    ]
    }
    ]
    },
    plugins: [ // 将 css 抽出成一个文件,以备 link 进 html
    new ExtractTextPlugin("../css/styles.css"),
    ]
    };

webpack 执行编译

------------------- 4 ---------------> 处理未转换的 箭头函数,即 ES6 ----> ES5

npm install  babel-loader@7  babel-core   babel-preset-es2015 --save -D

npm audit fix

----------------------------------

webpack.config.js

  • const {resolve} = require('path');
    const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = {
    entry: './src/js/index.js',
    output: {
    path: resolve(__dirname, 'build/'), // 输出到 build/
    filename: "./js/index.js" // js 输出文件 build/
    },
    module: {
    rules: [
    { // less 编译成 css,
    test: /\.less$/,
    use: ExtractTextPlugin.extract({
    fallback: "style-loader",
    use: ["css-loader", "less-loader"]
    })
    },
    { // loader 让 webpack 处理图片,并有 base64 功能
    test: /\.(png|jpg|gif)$/,
    use: [
    {
    loader: "url-loader",
    options:{
    outputPath: './img', // build/
    publicPath: '../img', // build/css/styles.css
    name:'[hash:5].[ext]',
    limit: 8192
    }
    }
    ]
    },
    { // js 检错功能
    test: /\.js$/, // 覆盖 .js 文件
    enforce: "pre", // 预先加载好 jshint-loader
    exclude: /node_modules/, // 排除掉 node_modules 文件夹下的所有文件
    use: [
    {
    loader: "jshint-loader",
    options: { // camelcase 已经弃用了
    // jslint 的错误信息在默认情况下会显示为 warning(警告)类信息
    // 将 emitErrors 参数设置为 true 可使错误显示为 error(错误)类信息
    emitErrors: false, // jshint 默认情况下不会打断 webpack 编译
    //如果你想在 jshint 出现错误时,立刻停止编译, 设置 failOnHint 参数为 true
    failOnHint: false,
    esversion: 6
    }
    }
    ]
    },
    { //es6 转 es5
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
    loader: 'babel-loader',
    options: {
    presets: ['es2015']
    }
    }
    }
    ]
    },
    plugins: [ // 将 css 抽出成一个文件,以备 link 进 html
    new ExtractTextPlugin("./css/styles.css"), // build/
    ]
    };

----------------- 5 -----------------> html 文件的清理 和 文件夹的清除插件

html-loader 没什么用 ----> 为了让 webpack 自动创建一个 html

然后将需求的 js、css 引入该 html 文件,所以就需要 HtmlWebpackPlugin 插件

npm install --save-dev html-webpack-plugin

npm audit fix

----------------------------------

webpack.config.js

  • const {resolve} = require('path');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {
    entry: "./src/js/index.js",
    output: {
    path: resolve(__dirname, 'build/'), // 输出到 webpack.build.js 同级的 build/
    filename: "./js/index.js" // js 输出文件 build/
    },
    module: {
    rules: [
    { // less 编译成 css,
    test: /\.less$/,
    use: ExtractTextPlugin.extract({
    fallback: "style-loader",
    use: ["css-loader", "less-loader"]
    })
    },
    { // loader 让 webpack 处理图片,并有 base64 功能
    test: /\.(png|jpg|gif)$/,
    use: [
    {
    loader: "url-loader",
    options:{
    outputPath: './img', // build/
    publicPath: '../img', // build/css/styles.css
    name:'[hash:5].[ext]',
    limit: 8192
    }
    }
    ]
    },
    { // js 检错功能
    test: /\.js$/, // 覆盖 .js 文件
    enforce: "pre", // 预先加载好 jshint-loader
    exclude: /node_modules/, // 排除掉 node_modules 文件夹下的所有文件
    use: [
    {
    loader: "jshint-loader",
    options: { // camelcase 已经弃用了
    // jslint 的错误信息在默认情况下会显示为 warning(警告)类信息
    // 将 emitErrors 参数设置为 true 可使错误显示为 error(错误)类信息
    emitErrors: false, // jshint 默认情况下不会打断 webpack 编译
    //如果你想在 jshint 出现错误时,立刻停止编译, 设置 failOnHint 参数为 true
    failOnHint: false,
    esversion: 6
    }
    }
    ]
    },
    { //es6 转 es5
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
    loader: 'babel-loader',
    options: {
    presets: ['es2015']
    }
    }
    }
    ]
    },
    plugins: [ // 将 css 抽出成一个文件,以备 link 进 html
    new ExtractTextPlugin("./css/styles.css"), // build/
    new HtmlWebpackPlugin({ //
    title: "webpack", // 网页 <head> <title>的页签名字
    filename: "index.html", // 生成文件的名字
    template: "./src/index.html" // 程序员自己的 html
    })
    ]
    };

------------------ 6 ----------------->  用来清空 build 文件夹 的插件

npm install clean-webpack-plugin --save-dev

----------------------------------------------------

const CleanWebpackPlugin = require("clean-webpack-plugin");

...

new CleanWebpackPlugin("./build");

...

webpack.config.js

  • const {resolve} = require('path');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CleanWebpackPlugin = require("clean-webpack-plugin"); module.exports = {
    entry: "./src/js/index.js",
    output: {
    path: resolve(__dirname, 'build/'), // 输出到 webpack.build.js 同级的 build/
    filename: "./js/index.js" // js 输出文件 build/
    },
    module: {
    rules: [
    { // less 编译成 css,
    test: /\.less$/,
    use: ExtractTextPlugin.extract({
    fallback: "style-loader",
    use: ["css-loader", "less-loader"]
    })
    },
    { // loader 让 webpack 处理图片,并有 base64 功能
    test: /\.(png|jpg|gif)$/,
    use: [
    {
    loader: "url-loader",
    options:{
    outputPath: './img', // build/
    publicPath: '../img', // build/css/styles.css
    name:'[hash:5].[ext]',
    limit: 8192
    }
    }
    ]
    },
    { // js 检错功能
    test: /\.js$/, // 覆盖 .js 文件
    enforce: "pre", // 预先加载好 jshint-loader
    exclude: /node_modules/, // 排除掉 node_modules 文件夹下的所有文件
    use: [
    {
    loader: "jshint-loader",
    options: { // camelcase 已经弃用了
    // jslint 的错误信息在默认情况下会显示为 warning(警告)类信息
    // 将 emitErrors 参数设置为 true 可使错误显示为 error(错误)类信息
    emitErrors: false, // jshint 默认情况下不会打断 webpack 编译
    //如果你想在 jshint 出现错误时,立刻停止编译, 设置 failOnHint 参数为 true
    failOnHint: false,
    esversion: 6
    }
    }
    ]
    },
    { //es6 转 es5
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
    loader: 'babel-loader',
    options: {
    presets: ['es2015']
    }
    }
    }
    ]
    },
    plugins: [ // 将 css 抽出成一个文件,以备 link 进 html
    new ExtractTextPlugin("./css/styles.css"), // build/
    new HtmlWebpackPlugin({ //
    title: "webpack", // 网页 <head> <title>的页签名字
    filename: "index.html", // 生成文件的名字
    template: "./src/index.html" // 程序员自己的 html
    }),
    new CleanWebpackPlugin("./build") // 用来清空 build 文件夹 的插件
    ]
    };

------------------- 7 提交环境 ----------------> build 环境搭建

新建config 文件夹,将 webpack.build.js 放入其中

配置 package.json 的 scripts

"scripts": {
"build": "webpack --display-modules --config ./config/webpack.build.js"
...
...
output:{
path: resolve(__dirname, "../build/"), // 指定 输出文件夹
...

// new CleanWebpackPlugin("./build");

new CleanWebpackPlugin("./build", {

root: resolve(__dirname, "../");    // 默认的 root 目录为 ./

});

...

./config/webpack.build.js

  • const {resolve} = require('path');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CleanWebpackPlugin = require("clean-webpack-plugin"); module.exports = {
    entry: "./src/js/index.js",
    output: {
    path: resolve(__dirname, '../build/'), // 输出到 webpack.build.js 同级的 build/
    filename: "./js/index.js" // js 输出文件 build/
    },
    module: {
    rules: [
    { // less 编译成 css,
    test: /\.less$/,
    use: ExtractTextPlugin.extract({
    fallback: "style-loader",
    use: ["css-loader", "less-loader"]
    })
    },
    { // loader 让 webpack 处理图片,并有 base64 功能
    test: /\.(png|jpg|gif)$/,
    use: [
    {
    loader: "url-loader",
    options:{
    outputPath: './img', // build/
    publicPath: '../img', // build/css/styles.css
    name:'[hash:5].[ext]',
    limit: 8192
    }
    }
    ]
    },
    { // js 检错功能
    test: /\.js$/, // 覆盖 .js 文件
    enforce: "pre", // 预先加载好 jshint-loader
    exclude: /node_modules/, // 排除掉 node_modules 文件夹下的所有文件
    use: [
    {
    loader: "jshint-loader",
    options: { // camelcase 已经弃用了
    // jslint 的错误信息在默认情况下会显示为 warning(警告)类信息
    // 将 emitErrors 参数设置为 true 可使错误显示为 error(错误)类信息
    emitErrors: false, // jshint 默认情况下不会打断 webpack 编译
    //如果你想在 jshint 出现错误时,立刻停止编译, 设置 failOnHint 参数为 true
    failOnHint: false,
    esversion: 6
    }
    }
    ]
    },
    { //es6 转 es5
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
    loader: 'babel-loader',
    options: {
    presets: ['es2015']
    }
    }
    }
    ]
    },
    plugins: [ // 将 css 抽出成一个文件,以备 link 进 html
    new ExtractTextPlugin("./css/styles.css"), // build/
    new HtmlWebpackPlugin({ //
    title: "webpack", // 网页 <head> <title>的页签名字
    filename: "index.html", // 生成文件的名字
    template: "./src/index.html" // 程序员自己的 html
    }),
    new CleanWebpackPlugin("./build", {
    root: resolve(__dirname, "../") // 修改默认 root 目录 "./" 为 "../"
    }) // 用来清空 build 文件夹 的插件
    ]
    };

------------------- 8 开发环境 ----------------> dev 开发环境的部署 (检测到代码的改变后,实时显示结果)

dev 的运行方式是加载在内存中的,没有任何输出, 用户察觉不到,执行时写入内存,关闭时清除内存相关数据

在 build 配置文件的基础上,增加 dev-server

entry、output、module、plugins + devServer

npm install webpack-dev-server@2 --save -D        // @3 有问题, 不能用

cp webpack.build.js webpack.dev.js

"dev": "webpack-dev-server --config ./config/webpack.dev.js"

devServer: {    // 以后用的就这么几个配置

hot: true,    // 模块热更新 (热模替换, 也称 HMR) ? 不必刷新,即可实时显示最新页面

open: true,    // 自动打开浏览器 (取决于 PC 配置的默认浏览器)

port: 3001,    // 自定义开发服务器 端口号, 不一定要 3001

compress: true    // 启用 gzip 来传输资源

}

npm run dev    // 有坑报错: 模块热更新被禁止了

解决: 还需要引入 webpack 利用其上面的一个插件 webpack.HotModuleReplacementPlugin()

new webpack.HotModuleReplacementPlugin()    // 热模更新 支持插件
此时运行 npm run dev

                                                

然后需要使用 loader 去处理 css 和 html ,才能实现 热模替换

----> css 重新使用 loader 的方式

/****

-

改回传统 loader, dev 环境自带将 css 抽出为一个文件,且 link 进 html ****/

+

----> html 也要追加使用传统的 html-loader

npm install html-loader -D

...

entry: ["./src/js/index.js", "./src/index.html"]    // 让 webpack 编译 index.js 和 index.html

...

// module: { rules:[{    // 添加一个 loader 让热模更新起作用

----> js 必须刷新 html 页面, 无法解决,其实 html 也是刷新了页面

webpack.dev.js

  • const {resolve} = require('path');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CleanWebpackPlugin = require("clean-webpack-plugin");
    const webpack = require('webpack'); module.exports = {
    entry: ["./src/js/index.js", "./src/index.html"],
    output: {
    path: resolve(__dirname, '../build/'), // 输出到 webpack.build.js 同级的 build/
    filename: "./js/index.js" // js 输出文件 build/
    },
    module: {
    rules: [
    { // dev 环境下使用传统的 loader 处理 css
    test: /\.less$/,
    use: [
    {loader:"style-loader"}, // 3. html 中建立 <style>,将 js 中 css 放入其中
    {loader:"css-loader"}, // 2. 将 css 以 commonJS 打包到 js 中
    {loader:"less-loader"}, // 1. 将 less 转为 css
    ]
    },
    { // loader 让 webpack 处理图片,并有 base64 功能
    test: /\.(png|jpg|gif)$/,
    use: [
    {
    loader: "url-loader",
    options:{
    outputPath: './img', // build/
    publicPath: '../img', // build/css/styles.css
    name:'[hash:5].[ext]',
    limit: 8192
    }
    }
    ]
    },
    { // js 检错功能
    test: /\.js$/, // 覆盖 .js 文件
    enforce: "pre", // 预先加载好 jshint-loader
    exclude: /node_modules/, // 排除掉 node_modules 文件夹下的所有文件
    use: [
    {
    loader: "jshint-loader",
    options: { // camelcase 已经弃用了
    // jslint 的错误信息在默认情况下会显示为 warning(警告)类信息
    // 将 emitErrors 参数设置为 true 可使错误显示为 error(错误)类信息
    emitErrors: false, // jshint 默认情况下不会打断 webpack 编译
    //如果你想在 jshint 出现错误时,立刻停止编译, 设置 failOnHint 参数为 true
    failOnHint: false,
    esversion: 6
    }
    }
    ]
    },
    { //es6 转 es5
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
    loader: 'babel-loader',
    options: {
    presets: ['es2015']
    }
    }
    },
    {
    test: /\.(html)$/,
    use: {loader:"html-loader"} // 仅仅让热模更新起作用
    }
    ]
    },
    plugins: [ // 将 css 抽出成一个文件,以备 link 进 html
    new ExtractTextPlugin("./css/styles.css"), // build/
    new HtmlWebpackPlugin({ //
    title: "webpack", // 网页 <head> <title>的页签名字
    filename: "index.html", // 生成文件的名字
    template: "./src/index.html" // 程序员自己的 html
    }),
    new CleanWebpackPlugin("./build", {
    root: resolve(__dirname, "../") // 修改默认 root 目录 "./" 为 "../"
    }), // 用来清空 build 文件夹 的插件
    new webpack.HotModuleReplacementPlugin() // 热模更新 支持插件
    ]
    };

-------------------- 9 -----------------> 不同配合文件的公共部分合并, 实现复用

  • cp  webpack.build.js  webpack.common.js

公共部分:

入口、出口不动

处理图片 loader 保留 url-loader

js 语法检查 loader 保留 jshint-loader

es6 转 es5 的 loader 保留 babel-loader

处理 html 的 loader 保留 html-loader (build 输出 html, dev 热更新支持)

删除 less 文件处理 loader    (build 需要 ExtractTextPlugin 处理,dev 需要传统 loader 方式处理支持热更新)

删除 CleanWebpackPlugin 因为 dev 无需清空文件夹,因为没有生成 文件夹

删除 ExtractTextPlugin 插件 dev 不用

webpack.common.js

  • const {resolve} = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {
    entry: "./src/js/index.js", output: {
    path: resolve(__dirname, '../build/'), // 输出到 webpack.build.js 同级的 build/
    filename: "./js/index.js" // js 输出文件 build/
    }, module: {
    rules: [
    { // loader 让 webpack 处理图片,并有 base64 功能
    test: /\.(png|jpg|gif)$/,
    use: [
    {
    loader: "url-loader",
    options:{
    outputPath: './img', // build/
    publicPath: '../img', // build/css/styles.css
    name:'[hash:5].[ext]',
    limit: 8192
    }
    }
    ]
    },
    { // js 检错功能
    test: /\.js$/, // 覆盖 .js 文件
    enforce: "pre", // 预先加载好 jshint-loader
    exclude: /node_modules/, // 排除掉 node_modules 文件夹下的所有文件
    use: [
    {
    loader: "jshint-loader",
    options: { // camelcase 已经弃用了
    // jslint 的错误信息在默认情况下会显示为 warning(警告)类信息
    // 将 emitErrors 参数设置为 true 可使错误显示为 error(错误)类信息
    emitErrors: false, // jshint 默认情况下不会打断 webpack 编译
    //如果你想在 jshint 出现错误时,立刻停止编译, 设置 failOnHint 参数为 true
    failOnHint: false,
    esversion: 6
    }
    }
    ]
    },
    { //es6 转 es5
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
    loader: 'babel-loader',
    options: {
    presets: ['es2015']
    }
    }
    }
    ]
    }, plugins: [ // 将 css 抽出成一个文件,以备 link 进 html
    new HtmlWebpackPlugin({ //
    title: "webpack", // 网页 <head> <title>的页签名字
    filename: "index.html", // 生成文件的名字
    template: "./src/index.html" // 程序员自己的 html
    }) // 用来清空 build 文件夹 的插件
    ]
    };
  • 在 webpack.build.js 中

npm install webpack-merge --save -D

...

const common = require("./webpack.common");     // 1. 引入 webpack.common.js 公共部分

const merge = require("webpack-merge");    // 2. 使用第三方库,合并

// 3. 合并 common 公共部分

保留

less 处理成一个 css 并抽出为一个文件

删除

入口、出口、

图片处理、语法检查、es6 转 es5

webpack.build.js

  • const {resolve} = require('path');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    const CleanWebpackPlugin = require("clean-webpack-plugin"); const common = require("./webpack.common"); // 1. 引入 webpack.common.js 公共部分
    const merge = require("webpack-merge"); // 2. 使用第三方库,合并 module.exports = merge(common, { // 3. 合并 common 公共部分
    module: {
    rules: [
    { // less 编译成 css,
    test: /\.less$/,
    use: ExtractTextPlugin.extract({ // 将 css 抽取成一个文件,并引入 html 文件
    fallback: "style-loader",
    use: ["css-loader", "less-loader"]
    })
    },
    ]
    }, plugins: [ // 将 css 抽出成一个文件,以备 link 进 html
    new ExtractTextPlugin("./css/styles.css"), // build/
    new CleanWebpackPlugin("./build", {
    root: resolve(__dirname, "../") // 修改默认 root 目录 "./" 为 "../"
    }) // 用来清空 build 文件夹 的插件
    ]
    });
  • 在 webpack.dev.js 中

...

const common = require("./webpack.common");     // 1. 引入 webpack.common.js 公共部分

const merge = require("webpack-merge");    // 2. 使用第三方库,合并

// 3. 合并 common 公共部分

不删

入口

删除

出口

图片处理、语法检查、es6 转 es5

ExtractTextPlugin 无需处理 less 为css 再为文件,dev 热更新自带功能

cleanWebpackPlugin 无需清除文件夹,因为根本没生成过文件夹

webpack.dev.js

  • const {resolve} = require('path');
    const webpack = require('webpack'); const common = require("./webpack.common"); // 1. 引入 webpack.common.js 公共部分
    const merge = require("webpack-merge"); // 2. 使用第三方库,合并 module.exports = merge(common, { // 3. 合并 common 公共部分
    entry: ["./src/js/index.js", "./src/index.html"], module: {
    rules: [
    { // dev 环境下使用传统的 loader 处理 css
    test: /\.less$/,
    use: [
    {loader:"style-loader"}, // 3. html 中建立 <style>,将 js 中 css 放入其中
    {loader:"css-loader"}, // 2. 将 css 以 commonJS 打包到 js 中
    {loader:"less-loader"}, // 1. 将 less 转为 css
    ]
    },
    {
    test: /\.(html)$/,
    use: {loader:"html-loader"} // 仅仅让热模更新起作用
    }
    ]
    },
    plugins: [ // 将 css 抽出成一个文件,以备 link 进 html
    new webpack.HotModuleReplacementPlugin() // 热模更新 支持插件
    ], devServer: { // 以后用的就这么几个配置
    hot: true, // 模块热更新 (热模替换, 也称 HMR)
    open: true,
    port: 3001,
    compress: true
    }
    });

---------------- 10 产品上线环境----------------> dist 环境配置 --或者说-- prod 环境配置

(压缩js、扩展前缀兼容、压缩 css、压缩 html)

  • cp webpack.build.js webpack.dist.js
  • dist: "webpack --display-modules --config ./config/webpack.dist.js";
  • 修改出口配置

output: {

path: resolve(__dirname, '../dist/'),    // 输出到 webpack.build.js 上一级的 dist 文件夹下

filename: "./js/[name].[hash:10].js"    // main.84374adda4.js

},

  • 修改 css 插件配置

plugins: [    // 将 css 抽出成一个文件,以备 link 进 html

new ExtractTextPlugin("./css/[name].[hash:10].css"),

...

  • 压缩 js 需要插件 UglifyJsPlugin()
  • npm install UglifyJsPlugin --save -D        // 压缩 js

const webpack = require("webpack");    // 1. 引入 webpack

new webpack.optimize.UglifyJsPlugin({    // 2. 追加一个插件

sourceMap: true    // 3. 生成映射文件,开发人员可以查找错误

})

...

devtool: ‘source-map’    // 4. 新增配置

...

运行会发现,所有代码资源都已经压缩了,包括 html

  • css 扩展前缀: 有些测试属性,在不同的浏览器需要加对应的前缀兼容

1. npm install postcss-loader --save -D        // 将测试样式 加 前缀 处理兼容

2. 在 use:  EtractTextPlugin.extract({

...

use:[新增一个 postcss-loader]    // 顺序要注意,否则报错

3. 在 package.json 同级目录,新建 postcss.config.js

module.exports = {

"plugins":{

"autoprefixer":{

"browsers":[

"ie>=8",

"ff>=30",

"chrome>=34",

"safari>=7",

"opera>=23"

]

}

}

}

4. npm install autoprefixer -save -D        // 扩展前缀

5. npm install less-plugin-clean-css --save -D        // 压缩 css

const CleanCssPlugin = require("less-plugin-clean-css");    // 1. 引入插件

// 2. 替换 use 中的 less-loader 如下

{loader:"less-loader", options:{

plugins:[new CleanCssPlugin({advanced: true})]

}

}

6. 添加 一个删除文件夹的插件

new CleanWebpackPlugin("./dist", {

root: resolve(__dirname, "../")

})

7. npm install html-webpack-plugin --save -D        // 使用 html-webpack-plugin 插件压缩 html 中的 minify: {}

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

// 并追加一个配置 minify:{removeComents:true, collapseWhitespace: true}

webpack.dist.js

  • const {resolve} = require('path');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    const CleanWebpackPlugin = require("clean-webpack-plugin");
    const webpack = require("webpack"); // 4. 引入 webpack, 利用其 API 压缩 js
    const CleanCssPlugin = require("less-plugin-clean-css"); // 9. 引入插件,压缩 css
    const HtmlWebpackPlugin = require('html-webpack-plugin'); // 12. 引入插件,压缩压缩 html
    const common = require("./webpack.common"); // 1. 引入 webpack.common.js 公共部分
    const merge = require("webpack-merge"); // 2. 使用第三方库,合并 module.exports = merge(common, { // 3. 合并 common 公共部分
    output: {
    path: resolve(__dirname, '../dist/'), // 输出到 webpack.build.js 上一级的 dist
    filename: "./js/[name].[hash:10].js" // main.72856.js
    }, module: {
    rules: [
    { // less 编译成 css,
    test: /\.less$/,
    use: ExtractTextPlugin.extract({ // 将 css 抽取成一个文件,并引入 html 文件
    fallback: "style-loader",
    use: [
    "css-loader",
    "postcss-loader", // 8. 前缀兼容
    {
    loader:"less-loader", // 10. 新增 less-loader 配置有压缩 css
    options:{plugins:[new CleanCssPlugin({advanced: true})]}
    }
    ]
    })
    },
    ]
    }, plugins: [ // 将 css 抽出成一个文件,以备 link 进 html
    new ExtractTextPlugin("./css/[name].[hash:10].css"), // build/
    new CleanWebpackPlugin("./dist", { // 11. 修改清除文件夹
    root: resolve(__dirname, "../") // 修改默认 root 目录 "./" 为 "../"
    }), // 用来清空 build 文件夹 的插件
    new webpack.optimize.UglifyJsPlugin({ // 5. 追加一个插件
    sourceMap: true // 6. 生成映射文件,开发人员可以查找错误
    }),
    new HtmlWebpackPlugin({ //
    title: "webpack", // 网页 <head> <title>的页签名字
    filename: "index.html", // 生成文件的名字
    template: "./src/index.html", // 程序员自己的 html
    minify:{removeComents:true, collapseWhitespace: true} // 13. 压缩html
    }) // 用来清空 build 文件夹 的插件
    ], devtool: 'source-map' // 7. 新增配置
    });

-------------------------------------

项目 - 脚手架搭建完成 - 源码

npm install webpack@3 --save -D  //局部安装

npm install less-loader less --save -D

npm install css-loader style-loader --save -D

npm install file-loader --save -D

npm install url-loader --save -D

npm install extract-text-webpack-plugin --save -D

npm i jshint-loader --save -D

npm audit fix

npm i jshint --save -D

npm install babel-loader@7 babel-core babel-preset-es2015 --save -D

npm install html-webpack-plugin --save -D

npm i clean-webpack-plugin --save -D

npm i webpack-dev-server@2 --save -D

npm i html-loader --save -D

npm i webpack-merge --save -D

npm i postcss-loader --save -D

npm i autoprefixer --save -D

npm i less-plugin-clean-css --save -D

npm i less-plugin-clean-css html-withimg-loader --save -D

{
    test: /\.(htm|html)$/i,
     use:[ 'html-withimg-loader'] 
},    // 2. 加入 loader 处理 html 中的 img-src 问题

webpack3_脚手架的更多相关文章

  1. 开发属于自己的yeoman脚手架(generator-reactpackage)

    自从前后端开始分离之后,前端项目工程化也显得越来越重要了,之前写过一篇搭建基于Angular+Requirejs+Grunt的前端项目教程,有兴趣的可以点这里去看 但是有些项目可以使用这种方式,但有些 ...

  2. 利用yeoman快速搭建React+webpack+es6脚手架

    自从前后端开始分离之后,前端项目工程化也显得越来越重要了,之前写过一篇搭建基于Angular+Requirejs+Grunt的前端项目教程,有兴趣的可以点这里去看 但是有些项目可以使用这种方式,但有些 ...

  3. 【React】dva-cli建立脚手架后发现页面样式不对的问题

    用dva-cli作为脚手架建立工程后,开始尝试编写页面.然后立马发现一个坑爹的问题. 在我less文件里面写了一个class ,比如:MainHead. 但是编译出来之后发现css文件里面变成了 Ma ...

  4. 【React】启动dva脚手架

    开始前: 确保node版本为6.5以上. // 安装脚手架 npm i dva-cli -g // 自动安装新工程 dva new newProjectName // 导入antd包 npm i an ...

  5. 【vuejs小项目】一、脚手架搭建工作

    一.关于vuejs 这是一个MVVM的前端开发框架,model(数据).viewmode(通讯).view(视图),它吸取了reactjs和angularjs的长处,核心重点在于组件化的设计原则. 我 ...

  6. 在基于vue的webpack脚手架开发中使用了代理转发,结果浏览器发出的请求中不带cookie导致登录时总是session失效怎么办?

    环境:            有2个业务接口需要转发到82的服务器上:     ../user/getCode.do     ../user/doLogin.do 现象:          使用上述的 ...

  7. Nodejs:简单的脚手架(一)

    html-webpack-plugin:  用来生成html文件的插件  glob:  用来筛选文件,文件目录 path:  管理文件路径 次脚手架里主要用到的是这3个插件,后续会根据所用插件逐渐完善 ...

  8. 自定义项目脚手架- Maven Archetypes

    在上篇Intellij修改archetype Plugin配置 中我们已经简单介绍了关于archetype的作用. 简单来说maven archetype插件就是创建项目的脚手架,你可以通过命令行或者 ...

  9. Wee – 为现代 Web 开发打造的 CSS 脚手架

    Wee 包含许多开发人员在搭建响应的,互动的网站和应用程序时需要的组件.正如它的名字一样,Wee 是一个微小.移动优先的 CSS 复位框架.Wee 组织在一个简单的.可扩展的层次结构,拥有一致的样式和 ...

随机推荐

  1. javaScript drag对象进行拖拽使用详解

    目录 drag简介 兼容性 drag事件 拖拽流程 DataTransfer对象 drag拖放桌面文件 drag实例 小结 drag简介 HMTL5提供的支持原生拖拽的实现 兼容性如何? 桌面端的支持 ...

  2. luogu 1731 搜索剪枝好题

    搜索剪枝这个东西真的是骗分利器,然鹅我这方面菜的不行,所以搜索数学dp三方面是真的应该好好训练一下 一本通的确该认真的刷嗯 #include<bits/stdc++.h> using na ...

  3. js中escape对应的C#解码函数 UrlDecode

    js中escape对应的C#解码函数 System.Web.HttpUtility.UrlDecode(s),使用过程中有以下几点需要注意   js中escape对应的C#解码函数 System.We ...

  4. Java 自定义hashmap和hashtable的key注意哪些问题

  5. Python学习笔记-Linux下安装Python

    Linux系统CentOS 1.安装依赖组件 yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel s ...

  6. 使用fiddler模拟重复请求接口

    使用fiddler模拟重复请求接口 重复请求某个接口,比如评论一条,这样点击多次就可以造多个评论数据

  7. 51nod--1006 最长公共子序列Lcs (动态规划)

    题目: 给出两个字符串A B,求A与B的最长公共子序列(子序列不要求是连续的). 比如两个串为: abcicba abdkscab ab是两个串的子序列,abc也是,abca也是,其中abca是这两个 ...

  8. 【原创】大叔问题定位分享(30)mesos agent启动失败:Failed to perform recovery: Incompatible agent info detected

    mesos agent启动失败,报错如下: Feb 15 22:03:18 server1.bj mesos-slave[1190]: E0215 22:03:18.622994 1192 slave ...

  9. php curl使用

  10. MySQL基础使用

    数据库 其实我们常常说的数据库,应该叫数据库系统. 表和库 数据表:用来保存数据的表格 数据库:用来统一管理数据表的容器 启动mysql 关闭mysql service mysqld start(启动 ...