Достаточно начать работу с webpack4.x

внешний интерфейс JavaScript Webpack
Достаточно начать работу с webpack4.x

Предисловие:

После WebPack4 некоторые плагины здорово меняются, а предыдущая версия пути отличается.Новичок входит в яму, эта статья расскажет, как настроить версию разработки WebPack4 с одного старта,Компиляция, упаковка и объединение css и js для генерации md5, обработка изображений в CSS,js автоматически вставляет html-страницы, удалить указанный файл,Извлечь общедоступные файлы,Горячее обновлениеи т.п.

Информация о конфигурации и подробные комментарии по оптимизации упаковки веб-пакета приложены позже.

обновил статьюJWT-аутентификация узла интерфейсной архитектуры, Добро пожаловать смотреть и смотреть! ! !

обновил статьюсерверная архитектура с небольшим узлом, Добро пожаловать смотреть и смотреть! ! !

Установить

//全局安装 
npm install -g webpack webpack-cli

Создать инициализацию папки

//创建文件夹
mkdir webpack4demo
//进入
cd webpack4demo
//初始化
npm init -y

Создайте папку scripts и создайте в ней файл index.js

index.js

const s=()=>{ 
console.log('s init')
}
s()

Создайте файл webpack.config.js

webpack.config.js

const path = require("path");
module.exports = {
    entry: {
        index: "./scripts/index.js" //入口文件，若不配置webpack4将自动查找src目录下的index.js文件
    },
    output: {
        filename: "[name].bundle.js",//输出文件名，[name]表示入口文件js名
        path: path.join(__dirname, "dist")//输出文件路径
    }
}

Выполнение разработки webpack --mode создаст dist/index.bundle.js


Создайте index.html и введите js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>
$END$
</body>
<script src="./dist/index.bundle.js"></script>
</html>

Откройте браузер, и вы увидите, что установленный ранее файл js начинает действовать.

Скомпилируйте, упакуйте и объедините css и js для создания md5

Создать a.js, c.js, a.css, изменить index.js

a.js

import acss from './a.css'
import c from './c.js'
const a={
    init(){
        console.log("a init bbbaaa")
    },
    cinit(){
       c.init()
    }
}
export default a;

c.js

const c={
    init(){
        console.log("ccccc")
    }
}
export default c;

a.css

body{ 
    background-color: #6b0392;
}

index.js

import a from './a.js'
import c from './c.js'
const s=()=>{
    a.init()
    a.cinit()
    c.init()
    console.log('s init')
}
s()

Настройте файл webpack.config.js

const path = require("path");
module.exports = {
    entry: {
        index: "./scripts/index.js"
    },
    output: {
        filename: "[name].bundle.[hash].js",//[hash]会在后面生成随机hash值
        path: path.join(__dirname, "dist")
    },
    module: { // 处理对应模块
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]//处理css
            }
        ]
    },
}

Установить загрузчик стилей, css-загрузчик

npm install style-loader css-loader --save-dev

воплощать в жизньwebpack --mode developmentВы увидите файл js со значением md5 и импортируете его в html.

Обработка изображений в CSS

Установка URL-загрузчик, файл-загрузчик

npm install url-loader file-loader --save-dev

Измените A.CSS, поместите изображение в каталог сценариев.

body{
    background-image: url("./timg.jpg");
    background-color: #a748ca;
}

Настройте файл webpack.config.js

module: {
    rules: [
        {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        },
        {
            test:/\.(png|jpg|gif)$/,
            use:[{
                loader:'url-loader',
                options:{
                    outputPath:'images/',//输出到images文件夹
                    limit:500  //是把小于500B的文件打成Base64的格式，写入JS
                }
            }]
        }
    ]
},

воплощать в жизньwebpack --mode developmentВы увидите, что в папке с изображениями в dist есть изображение, откройте index.html


js автоматически вставляет html-файлы

С помощью плагина html-webpack-plugin можно автоматически импортировать сгенерированный js на html-страницу, не добавляя его вручную

//安装html-webpack-plugin
npm install html-webpack-plugin --save-dev
//安装webpack webpack-cli
npm install webpack webpack-cli --save-dev

Настройте файл webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin
module.exports = {
    entry: {
        index: "./scripts/index.js"
    },
    output: {
        filename: "[name].bundle.[hash].js",
        path: path.join(__dirname, "dist")
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    },
    plugins: [// 对应的插件
        new HtmlWebpackPlugin({ //配置
            filename: 'index.html',//输出文件名
            template: './index.html',//以当前目录下的index.html文件为模板生成dist/index.html文件
        }),
    ]
}

воплощать в жизньwebpack --mode developmentНе забудьте удалить сценарий, который был введен вручную ранее, вы можете видеть, что index.html автоматически создается в dist, и вы можете увидеть его, когда откроете его.

удалить указанный файл

Используйте плагин clean-webpack-plugin, удалите указанный файл, дополнительные настройки см.clean-webpack-plugin

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

Настройте файл webpack.config.js

const CleanWebpackPlugin = require('clean-webpack-plugin');//引入    
plugins: [// 对应的插件
        new HtmlWebpackPlugin({ //配置
            filename: 'index.html',//输出文件名
            template: './index.html',//以当前目录下的index.html文件为模板生成dist/index.html文件
        }),
        new CleanWebpackPlugin(['dist']), //传入数组,指定要删除的目录
    ]

воплощать в жизньwebpack --mode development，Вы можете видеть, что каталог dist удален, создан новый dist, а предыдущий файл js был удален.

Извлечь общедоступные файлы

Мы видим, что и a.js, и index.js представляют собой файл c.js. Зачем нам извлекать общий код? Проще говоря, чтобы уменьшить избыточность кода и повысить скорость загрузки. В отличие от предыдущей конфигурации веб-пакета:

//之前配置
// new webpack.optimize.SplitChunksPlugin({
//     name: 'common', // 如果还要提取公共代码,在新建一个实例
//     minChunks: 2, //重复两次之后就提取出来
//     chunks: ['index', 'a'] // 指定提取范围
// }),
//现在配置
optimization: {
    splitChunks: {
        cacheGroups: {
            commons: {  // 抽离自己写的公共代码
                chunks: "initial",
                name: "common", // 打包后的文件名，任意命名
                minChunks: 2,//最小引用2次
                minSize: 0 // 只要超出0字节就生成一个新包
            },
            vendor: {   // 抽离第三方插件
                test: /node_modules/,   // 指定是node_modules下的第三方包
                chunks: 'initial',
                name: 'vendor',  // 打包后的文件名，任意命名
                // 设置优先级，防止和自定义的公共代码提取时被覆盖，不进行打包
                priority: 10
            },
        }
    }
},

скачать jq npm install jquery --saveВ a.js ссылки на index.jsimport $ from 'jquery'вывод $

Создайте 3 файла js и выполнитеwebpack --mode development


Горячее обновление, автоматическое обновление

мы будем использоватьwebpack-dev-server,webpack-dev-serverосновывается наNode.jsа такжеwebpack, небольшой сервер с мощнымАвтоматическое обновлениеа такжегорячий свопФункция.

Установитьwebpack-dev-server

npm install webpack-dev-server --save-dev

Настройте файл webpack.config.js

const webpack = require("webpack");
plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: './index.html',
    }),
    new CleanWebpackPlugin(['dist']), //传入数组,指定要删除的目录
    // 热更新，热更新不是刷新
    new webpack.HotModuleReplacementPlugin()
],
devServer: {//配置此静态文件服务器，可以用来预览打包后项目
    inline:true,//打包后加入一个websocket客户端
    hot:true,//热加载
    contentBase: path.resolve(__dirname, 'dist'),//开发服务运行时的文件根目录
    host: 'localhost',//主机地址
    port: 9090,//端口号
    compress: true//开发服务器是否启动gzip等压缩
},

настроить package.json

"scripts": {
  "dev": "webpack-dev-server --mode development"
},

воплощать в жизньnpm run dev доступhttp://localhost:9090/

Любая модификация любого файла автоматически обновит веб-сайт для отображения измененного содержимого.

Суммировать:

В webpack4 есть много-много конфигураций, таких как разделение css, конфигурация less sass, компиляция js es6, конфигурация с несколькими входами, конфигурация производственной среды, автоматическое обнаружение и удаление модулей, не используемых js, и т. д., нам остается только ждать в следующий раз просто резюмирую, спасибо за просмотр, новичкам прошу указывать на ошибки.

конфигурация оптимизации упаковки webpack

Прикреплены 3 файла, webpack.base.conf.js (базовый файл конфигурации), webpack.dev.conf.js (файл конфигурации среды разработки), webpack.prod.conf.js (файл конфигурации рабочей среды), которые являются подробными примечаниями.

webpack.base.conf.js

const path = require("path")
const chalk = require('chalk');

const ProgressBarPlugin = require('progress-bar-webpack-plugin')//进度条
const MiniCssExtractPlugin = require('mini-css-extract-plugin') //CSS文件单独提取出来
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HappyPack = require('happypack')//多线程压缩
const os = require('os')// node 提供的系统操作模块
// 根据系统的内核数量 指定线程池个数
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// 转换为绝对路径
function resolve(dir) { 
return path.join(__dirname,'..', dir);
}
function assetsPath(_path_) {
let assetsSubDirectory = 'static';
return path.posix.join(assetsSubDirectory, _path_)
}
module.exports = {
entry: {
app: './src/main.js'//入口文件
},
output: {
path: resolve("dist"),//输出文件路径
filename: '[name].js' //输出文件名，[name]表示入口文件js名
},
resolve: {
// 优化模块查找路径
modules: [
path.resolve('src'),
path.resolve('node_modules') // 指定node_modules所在位置 当你import 第三方模块时 直接从这个路径下搜索寻找
],
//开启后缀名自动补全，指定搜索那些文件
extensions: ['.js','.vue','.json'],
//配置别名可以加快webpack查找模块的速度
alias: {
'vue$': 'vue/dist/vue.esm.js',//末尾添加 $，以表示精准匹配
'@': resolve('src')
}
},
//模块
module: {
// 多个loader是有顺序要求的，从右往左写，因为转换的时候是从右往左转换的
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
include: resolve('src'),//限制范围，提高打包速度
exclude: /node_modules/ //排除
},
{
test: /\.js|jsx$/,
exclude: /node_modules/,
loader: 'happypack/loader?id=happys',// cacheDirectory缓存loader执行结果
include: resolve('src'),
exclude: /node_modules/ 
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'postcss-loader', 'less-loader']
}),
include: [resolve('src')], //限制范围，提高打包速度
exclude: /node_modules/
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use:['css-loader', 'postcss-loader', 'less-loader']}),
include: resolve('src'),
exclude: /node_modules/ 
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,// 10KB 以下使用 base64
name: assetsPath('img/[name].[hash:7].[ext]')
}

webpack.dev.conf.js

const webpack = require('webpack')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin') // 生成html的插件


const devWebpackConfig = merge(baseWebpackConfig, {
devtool: 'eval-source-map', // 指定加source-map的方式
//配置此静态文件服务器，可以用来预览打包后项目
devServer: {
inline:true,//打包后加入一个websocket客户端
hot:true,//热加载
contentBase: path.join(__dirname, "..", "dist"), //静态文件根目录
port: 3824, // 端口
host: 'localhost',
overlay: true,
compress: false // 服务器返回浏览器的时候是否启动gzip压缩
},
watchOptions: {
ignored: /node_modules/, //忽略不用监听变更的目录
aggregateTimeout: 500, //防止重复保存频繁重新编译,500毫秒内重复保存不打包
poll:1000 //每秒询问的文件变更的次数
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '..', 'src','index.html'),
filename: 'index.html',
// vendor: './vendor.dll.js', //与dll配置文件中output.fileName对齐
hash:true,//防止缓存
// minify:{
// removeAttributeQuotes:true//压缩 去掉引号
// }
}),
new webpack.HotModuleReplacementPlugin(), //HMR
new webpack.NamedModulesPlugin() // HMR
]
})

module.exports = devWebpackConfig

webpack.prod.conf.js

const path = require('path');
const glob = require('glob');
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin') // 复制静态资源的插件
const CleanWebpackPlugin = require('clean-webpack-plugin') // 清空打包目录的插件
const HtmlWebpackPlugin = require('html-webpack-plugin') // 生成html的插件
const baseWebpackConfig = require('./webpack.base.conf')
const merge = require('webpack-merge')
const WebpackParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const PurifyCSSPlugin = require("purifycss-webpack");
const ExtractTextPlugin = require('extract-text-webpack-plugin')

function assetsPath(_path_) {
    let assetsSubDirectory = 'static';
    return path.posix.join(assetsSubDirectory, _path_)
  }
const prodWebpackConfig = merge(baseWebpackConfig, {
    output:{
        path: path.resolve(__dirname, '../dist'),
        filename: assetsPath('js/[name].js'),
        publicPath: './' //这里要放的是静态资源CDN的地址(一般只在生产环境下配置)
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../src', 'index.html'),
            filename:'index.html',
            // chunks:['index', 'common'],
            // vendor: './vendor.dll.js',
            hash:true,//防止缓存
            minify:{
                removeAttributeQuotes:true,//压缩 去掉引号,
                collapseWhitespace: true //是否去除空格
            }
        }),
        new CopyWebpackPlugin([
            {
                from: path.join(__dirname, '../src', 'assets'),
                to: path.join(__dirname,  '..', 'dist', 'assets'),
                ignore: ['.*']
            }
        ]),
        new CleanWebpackPlugin(['dist'], {
            root: path.join(__dirname, '..'),
            exclude: ['manifest.json', 'vendor.dll.js'],
            verbose: true,
            dry:  false
        }),
        new WebpackParallelUglifyPlugin({
            workerCount: 4, // 开启几个子进程去并发的执行压缩，默认是当前电脑的cpu数量减1
            uglifyJS: {
                output: {
                    beautify: false, // 不需要格式化
                    comments: false // 保留注释
                },
                compress: {
                    warnings: false, // Uglifyjs 删除没有代码时，不输出警告
                    drop_console: true, // 删除所有console语句
                    collapse_vars: true,
                    reduce_vars: true
                }
            }
        }),
        //压缩提取出的css，并解决ExtractTextPlugin分离出的js重复问题(多个文件引入同一css文件)
        new OptimizeCSSPlugin({
            cssProcessorOptions: {safe: true}
        }),
        //消除未使用的CSS
        new PurifyCSSPlugin({
            paths: glob.sync(path.join(__dirname, '../src/*.html')),
        }),
        //打包css生成另外的文件夹
        new ExtractTextPlugin({
            filename: 'static/css/[name].css',
            disable: false,
            allChunks: false
          })
    ]
})
module.exports = prodWebpackConfig


Категории