玖叶教程网

初始化一个webpack项目

npm init
npm install --save-dev webpack webpack-cli

webpack目录结构

配置入口和输出

- 创建 webpack.config.js
- 入口文件为 src/index.js
- 输出打包文件为 dist/bundle.js

const path = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
   }

代理服务器和热更新

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

- 加入配置
	devServer: {
        contentBase: './dist',
        host: 'localhost',
        port: 8000
    }

对css进行打包

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

- 引入配置
	module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }

使用less和sass

npm install less less-loader --save-dev
npm install sass-loader node-sass --save-dve

- less和sass的使用方式基本一致
	- less的文件后缀为 .less
	- sass的文件后缀为 .scss

- 引入配置
	module: {
        rules: [
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    }

自动添加浏览器前缀

npm install postcss-loader autoprefixer --save-dev

- 在package.json文件中加入
	"browserslist": [
    "ie >= 8",
    "Firefox >= 20",
    "Safari >= 5",
    "Android >= 5",
    "Ios >= 6",
    "last 4 version"
  ]

- 引入配置
	module: {
        rules: [
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader',{
                    loader: 'postcss-loader',
                    options: {
                        plugins: [
                            require('autoprefixer')()
                        ]
                    }
                }],
               
            }
        ]
    }

编译后运行的效果图

使用bootstrap

- npm install bootstrap@3
- 将font文件夹和css文件夹复制到src目录
- index.js 引入 import './css/bootstrap.min.css'
- webpack.config.js 配置
	- bootstrap文件打包配置
			{
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        outputPath: 'font'
                    }
                }]
            }
	- css文件打包配置(不设置会打包失败)
			{
                test: /\.(css)$/,
                use: ['style-loader', 'css-loader']
            }

使用jquery

- 第一种方法
	- npm install jquery --save-dev
	- src/index.js文件中引入 import jquery from 'jquery'
	- 使用
	$(function() {
		$('.header').addClass('one')
	})

- 第二种方法
	- 配置webpack.config.js
	- resolve: {
        alias: {
            JQuery: path.resolve(__dirname, 'src/js/jquery.min.js')
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
            JQuery: "JQuery"
        })
    ]
    - 使用
    - JQuery(function() {
		    JQuery('#header').addClass('three')
		})

自动生成html代码

- npm install html-webpack-plugin
- 使用
const htmlWebpackPlugin = require('html-webpack-plugin')
// 加入配置
	plugins: [
        new htmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
            	collapseWhitespace: true,
                removeTagWhitespace: true,
                removeAttributeQuotes:true,
                removeComments: true,
                removeEmptyElements: true,
                minifyCSS: true,
                minifyJS: true
            },
            hash: true
        })
    ]

使用分离css插件

- 安装
	- npm install mini-css-extract-plugin
- 引入
	- 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',{
                    loader: 'postcss-loader',
                    options: {
                        plugins: [
                            require('autoprefixer')()
                        ]
                    }
                }]
            }
	- plugins添加配置
	- plugins: [
		new MiniCssExtractPlugin({
			filename: './css/index.css'
		})
	]

使用插件压缩css文件

- npm install optimize-css-assets-webpack-plugin
- 引入 
	- const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
- 使用
	- new OptimizeCssAssetsWebpackPlugin({
            assetNameRegExp: /\.css$/g, // 匹配需要优化或者压缩的资源名
            cssProcessor: require('cssnano'), // 压缩和优化的css处理器
            cssProcessorPluginOptions: { // css处理器插件选项
                preset: ['default', {discardComments: {removeAll: true}}] // 取出注释
            },
            canPrint: true  // 控制台允许打印内容
        })