html怎么读取webpack的样式,webpack基本使用

npm install webpack webpack-cli webpack-dev-server -D

复制代码

1.基本配置 webpack.config.js

当在项目中直接运行webpack时，默认读取webpack.config.js中的配置，等同于运行 webpack webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin') //自动生成html

module.exports = {

mode: 'development', // 可选development|production

entry: path.join(__dirname, 'src', 'main.js'),

watch: true,

output: {

path: path.resolve(__dirname, 'dist'),

publicPath: '', // js 路径为public + path + filename

filename: "main.js",

chunkFilename: '[name].js'

},

module: {

rules: [

{

test: /\.css$/,

// css-loader 导入css

// style-loader 将css插入到style标签中

use: ['style-loader', 'css-loader']

},

{

test: /\.less$/,

use: ['style-loader', 'css-loader', 'less-loader']

},

{

test: /\.html$/, // 导入 html

use: ['html-loader']

}

]

},

plugins: [

new HtmlWebpackPlugin({

filename: 'index.html',

template: 'index.html'

})

],

devtool: 'source-map',

devServer: {

contentBase: path.join('/dist/'),

inline: true,

host: '127.0.0.1',

port: 3000,

}

};

复制代码

2.html处理

html-webpack-plugin: 可以指定模版生成html,并可以进行去除双引号、折叠空白符号之类的操作

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

plugins: [

new HtmlWebpackPlugin({

template: './src/index.html',

filename: 'index.html',

minify: {

removeAttributeQuotes: true,

collapseInlineTagWhitespace: true

},

hash: true

})

]

复制代码

3.样式处理

3.1基本设置

module: {

rules: [

{

test: /\.css$/,

use: [{

// 插入到style中

loader: 'style-loader',

options: {

insertAt: 'bottom'

}

}, 'css-loader']

},

{

test: /\.less$/,

use: ['style-loader', 'css-loader', 'less-loader']

}

]

}

复制代码

3.2 将所有的样式抽离到一个css文件

const MiniCssExtractPlugin= require('mini-css-extract-plugin')

module: {

rules: [

{

test: /\.css$/,

use: [

MiniCssExtractPlugin.loader,

'css-loader']

},

{

test: /\.less$/,

use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']

}

]

}

复制代码

3.3 将样式自动添加前缀

cnpm install postcss-loader autoprefixer

// webpack.config.js

module: {

rules: [

{

test: /\.css$/,

use: [

MiniCssExtractPlugin.loader,

'css-loader', 'postcss-loader']

},

{

test: /\.less$/,

use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']

}

]

}

// postcss.config.js

module.exports = {

plugins: [

require('autoprefixer')

]

}

复制代码

3.4 production 压缩css

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {

optimization: {

minimizer: [

new OptimizeCSSAssetsPlugin()

]

},

mode: 'production', // production | development

}

复制代码

3.5 production 压缩js

cnpm install uglifyjs-webpack-plugin -D

const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); //压缩js

module.exports = {

optimization: { //优化项

minimizer: [

new UglifyWebpackplugin({

test: /\.js(\?.*)?$/i,

cache: true,

// 是否并行处理

parallel: true,

sourceMap: true

})

]

}

}

复制代码

4. 转换es6语法以及校验

cnpm install babel-loader @babel/core @babel/preset-env -D

module.exports = {

entry: ["@babel/polyfill", "./src/main.js"],

module:[

{

test: /\.js$/,

include: path.resolve(__dirname, 'src'),

exclude: /node_modules/,

use: {

loader: 'babel-loader',

options: {

presets: [

'@babel/preset-env'

],

plugins: [

"@babel/plugin-proposal-class-properties",

"@babel/plugin-transform-runtime"

//根据自己的需求自行添加

]

}

}

},

{

test: /\.js$/,

use: {

loader: 'eslint-loader',

options: {

enfore: 'pre'

}

}

}

]

}

复制代码

5. 全局变量引入的问题(以 jquery 为例)

全局loader expose-loader

前置loder

普通loader

内联loader

后置loader postcss-loader

5.1 import $ from 'jquery' 时

module = [

test: require.resove('jquery'),

use:'expose-loader?$'

]

复制代码

5.2 将

const webpack = require('webpack')

plugins: [

new webpack.ProvidePlugin({

$: 'jquery'

})

],

复制代码

6.处理图片

6.1 处理css，js中的图片引用

module: [

{

test: /.(jpg|jpeg|png|gif|svg)$/,

use:'file-loader'

}

]

复制代码

6.2 处理 html 中引入的图片

module: [

{

test: /.html$/,

use:'html-withimg-loader'

}

]

复制代码

6.3 将小的图片转成base64，减少http请求

module: [

{

loader: 'url-loader',

options: {

// 小于50k的图片转成base64

limit: 50 * 1024, // 50k

name: '[hash:8].[ext]',

outputPath: './images'

}

}

]

复制代码

7.打包文件分类

//img

module: [

{

loader: 'url-loader',

options: {

// 小于50k的图片转成base64

limit: 50 * 1024, // 50k

name: '[hash:8].[ext]',

outputPath: '/images/', //图片打包到images下

//打包后为图片的引入路径前添加url前缀，可以在需要将图片使用cdn的时候用(和其他文件的publicPath不同)

//publicPath: 'http://www.xxxcdn.com/'

}

}

]

//css

plugins: [

new MiniCss({

filename: 'css/main.css' // 会将css文件打包为 dist/css/main.css

}),

]

// js

output: {

filename: 'js/main.js'

}

复制代码