webpack配置_html-js-css

概述一、webpack配置初始化npm和安装webpack npm init -y //-y表示默认配置npm install -g webpack webpack-cli //-g 表示全局安装如果要使用命令行就要全局安装 -D表示安装在本地创建webpack.config.js 　　相关配置参数： Entry: 入口 Module:模块，webpack中一切皆是模块 Chunk:代码

一、webpack配置

初始化npm和安装webpack

npm init -y //-y表示默认配置npm install -g webpack webpack-cli //-g 表示全局安装 如果要使用命令行就要全局安装   -D表示安装在本地

创建webpack.config.Js

　　相关配置参数：

Entry: 入口 Module:模块，webpack中一切皆是模块 Chunk:代码库，一个chunk由十多个模块组合而成，用于代码合并与分割 Loader:模块转换器，用于把模块原内容按照需求转换成新内容 Plugin:扩展插件 Output: 输出结果

const path = require(‘path‘);module.exports = {    entry: path.resolve(__dirname,‘src/index.Js‘),//__dirname 是本地目录的绝对路径 path.resolve返回的结果把两个路径参数进行了拼接    output: {        path: path.resolve(__dirname,‘dist‘),//输出的文件路径        filename: ‘bundle.Js‘,//输出的主文件的文件名        publicPath: ‘/‘  //上线时配置的是cdn的地址    }}

二、HTML模板

HTML-webpack-plugin 可以指定template模板文件，将会在output目录下，生成HTML文件，并引入打包后的Js

安装

npm install -D HTML-webpack-plugin

在webpack.config.Js中引入

const HTMLWebpackPlugin = require(‘HTML-webpack-plugin‘);

const path = require(‘path‘);

module.exports = {

   entry: path.resolve(__dirname,‘src/index.Js‘),//__dirname 是本地目录的绝对路径 path.resolve返回的结果把两个路径参数进行了拼接 output: { path: path.resolve(__dirname,‘dist‘),//输出的文件路径 filename: ‘bundle.Js‘,//输出的主文件的文件名 publicPath: ‘/‘ //上线时配置的是cdn的地址  }

  plugins: [ new HTMLWebpackPlugin({ 
　　　　　　　　template: path.resolve(__dirname,‘src/index.HTML‘)  //以当前的HTML文件为模板作为展示
　　　　　　　}) ] 
}

三、配置 webpack-dev-server

webpack-dev-server提供了一个简单的Web服务器和实时热更新的能力

安装

npm install -D webpack-dev-server

在 webpack.config.Js 增加 devServer 配置:

const path = require(‘path‘);const HTMLWebpackPlugin = require(‘HTML-webpack-plugin‘);module.exports = {    //...other code    devServer: {        contentBase: ‘./dist‘,port: ‘8080‘,host: ‘localhost‘    }}

在 package.Json 的 scripts 字段中增加:

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

在命令行中执行 npm run dev 然后打开浏览器进入 localhost://8080查看网页

四、加载CSS

通过使用 style-loader 和 css-loader,可以将 CSS 文件转换成Js文件类型。

npm install -D style-loader css-loader

在webpack.config.Js中加入module

module.exports = {    //other code    module: {        rules: [            {                test: /\.CSS/,use: [‘style-loader‘,‘css-loader‘],//注意顺序，从右向左开始转化   use里的loader也可以以对象的形式进行配置
　　　　　　　　                exclude: /node_modules/,//不要处理的路径                include: path.resolve(__dirname,‘src‘) //要处理的路径            }        ]    }}

需要在主Js文件 index.Js中引入例如： import ‘./src/index.CSS‘

　　配置参数：

test: 匹配处理文件的扩展名的正则表达式 use: loader名称 include/exclude: 手动指定必须处理的文件夹或屏蔽不需要处理的文件夹 query: 为loader提供额外的设置选项

五、加载图片

file-loader: 解决CSS等文件中的引入图片路径问题 url-loader: 当图片小于limit的时候会把图片Base64编码，大于limit参数的时候使用file-loader进行拷贝

安装

npm install -D url-loader file-loader

在 webpack.config.Js 中增加 loader 的配置(增加在 module.rules 的数组中)。

module.exports = {    //other code    module: {        rules: [            {                test: /\.(gif|jpg|png|bmp|eot|woff|woff2|ttf|svg)/,use: [                    {                        loader: ‘url-loader‘,options: {                            limit: 8192,outputPath: ‘images‘                        }                    }                ]            }        ]    }}

六、编译less和sass

安装

npm install -D less less-loadernpm install -D node-sass sass-loader

在webpack.config.Js添加配置

module.exports = {    //other code    module: {        rules: [            {                test: /\.less/,use: [‘style-loader‘,‘css-loader‘,‘less-loader‘],exclude: /node_modules/,include: path.resolve(__dirname,‘src‘)            },{                test: /\.sCSS/,‘sass-loader‘],‘src‘)            }        ]    }}

七、转义 ES6/ES7/JsX

npm install -D @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/plugin-proposal-decorators @babel/plugin-proposal-object-rest-spread

添加配置

module.exports = {    //other code    module: {        rules: [            {                test: /\.Jsx?$/,use: [                    {                        loader: ‘babel-loader‘,options: {                            presets: [‘@babel/preset-env‘,‘@babel/react‘],plugins: [                                ["@babel/plugin-proposal-decorators",{ "legacy": true }] //装饰器                            ]                        }                    }                ],‘src‘),exclude: /node_modules/            },]    }}

八、压缩Js文件

安装

npm install -D uglifyJs-webpack-plugin

添加配置

const UglifyWebpackPlugin = require(‘uglifyJs-webpack-plugin‘);module.exports = {    //other code    optimization: {        minimizer: [            new UglifyWebpackPlugin({                parallel: 4            })        ]    }}

九、分离CSS

安装

npm install -D mini-css-extract-plugin

配置把style-loader 换成插件loader

const MiniCSSExtractPlugin = require(‘mini-css-extract-plugin‘);module.exports = {    //other code    module: {        rules: [            {                test: /\.CSS/,use: [{ loader: MiniCSSExtractPlugin.loader},‘css-loader‘],{                test: /\.less/,use: [{ loader: MiniCSSExtractPlugin.loader },‘css-loader‘,]    },plugins: [        new MiniCSSExtractPlugin({            filename: ‘CSS/[name].CSS‘        })    ]}

十、压缩CSS文件

安装

npm install --save-dev optimize-css-assets-webpack-plugin

添加配置

const OptimizeCSSAssetsWebpackPlugin = require(‘optimize-css-assets-webpack-plugin‘);module.exports = {    //other code    optimization: {        minimizer: [            new OptimizeCSSAssetsWebpackPlugin()        ]    }}

webpack.config.Js文件:

const path = require(‘path‘);const HTMLWebpackPlugin = require(‘HTML-webpack-plugin‘);const UglifyWebpackPlugin = require(‘uglifyJs-webpack-plugin‘);const MiniCSSExtractPlugin = require(‘mini-css-extract-plugin‘);const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);const OptimizeCSSAssetsWebpackPlugin = require(‘optimize-css-assets-webpack-plugin‘);module.exports = {    entry: path.resolve(__dirname,output: {        path: path.resolve(__dirname,filename: ‘bundle.Js‘,publicPath: ‘/‘    },devServer: {        contentBase: ‘./dist‘,host: ‘localhost‘    },module: {        rules: [            {                test: /\.Jsx?$/,{ "legacy": true }]                            ]                        }                    }                ],{                test: /\.CSS/,{                test: /\.(gif|jpg|png|bmp|eot|woff|woff2|ttf|svg)/,options: {                            limit: 1024,outputPath: ‘images‘                        }                    }                ]            }        ]    },optimization: {        minimizer: [            new UglifyWebpackPlugin({                parallel: 4            }),new OptimizeCSSAssetsWebpackPlugin()        ]    },plugins: [        new HTMLWebpackPlugin({            template: path.resolve(__dirname,‘src/index.HTML‘),}),new MiniCSSExtractPlugin({            filename: ‘CSS/[name].CSS‘        }),new CleanWebpackPlugin()    ]}