#前端# webpack4基礎到進階

初始化一個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')
		})