WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。 为什么要使用webpack:因为源码无法直接在浏览器上运行,必须通过转码后才能运行。
目前的构建工具:
构建工具需要做哪些事:
1. 项目初始化 npm init //初始化项目生成package.json(engions属性告诉当前项目依赖的node哪个版本,npm依赖的哪个版本)
2.npm install webpack -g //全局安装
npm install --save-dev webpack 或 npm i -D webpack // 本地安装并保存到package.json的devDependencies
1.使用webpack之前要对webpack进行一些配置,webpack默认会调用项目根目录下的webpack.config.js这个文件。(想改变调用文件也可以用config命令)。
2.接下来理解几个基本概念:
3.说说webpack.config.js里面的一些基本配置还有常用的loader,pliugin,结合一些框架。
4.了解更多的配置
webpack.config.js
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HappyPack = require('happypack');
//构造出共享进程池,在进程池中包含3个子进程
const happyThreadPool = HappyPack.ThreadPool({size: 3 });
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
//DllReferencePlugin用于在主要的配置文件中引入DllPlugin插件打包好的动态链接库文件
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/assets/',
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: 'css-loader',
options: {
minimize: true,
sourceMap: true,
module: true,
localIdentName: '[path][name]---[local]---[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: 'postcss.config.js' // 这个得在项目根目录创建此文件
}
}
}
],
}),
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif)$/,
use: 'url-loader?limit=8192&name=images/[name].[ext]',
exclude: /node_modules/
},
// {
// test: /\.js$/,
// use: [
// {
// loader: 'eslint-loader',
// options: {
// emitWarning: true
// }
// },
// {
// loader:'babel-loader',
// },
// ],
// },
{
test: /\.js$/,
use:['happypack/loader?id=babel'],
exclude: /node_modules/
}
],
},
plugins: [
new ExtractTextPlugin({
filename: `css.css`,
}),
new HtmlWebpackPlugin({
title: 'feikaiixn'
}),
//告诉webpack使用了哪些动态链接库
new DllReferencePlugin({
context:__dirname,
manifest:require('./dist/react.mainfest.json'),
}),
new HappyPack({
id : 'babel',
loaders:['babel-loader?cacheDirectory'],
//threads代表开启几个子进程去处理这一类的文件
//threads:4
//使用共享进程池中的子进程去处理任务
threadPool:happyThreadPool,
})
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000,
inline: true,
open: true,
// overlay:{
// errors:true,
// warnings:true
// }
cache: false,
},
watch:true,
watchOptions:{
ignored:/node_modules/,
//监听变化后会等300ms再去执行动作,防止文件更新太快导致重新编译频率太高
aggregateTimeout:300
},
//resolve配置如何寻找模块所对应的文件
resolve: {
alias: {
components: './'
},
extensions: ['.js', '.json']
},
devtool: 'source-map'
}
package.json
{
"name": "webpack-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dll": "webpack -p --config webpack_dll.config.js --progress --profile --colors",
"dev": "webpack-dev-server --inline --mode development",
"build": "webpack --mode production --display-used-exports",
"linkjs": "eslint ./src"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^8.2.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.11",
"eslint": "^4.19.1",
"eslint-loader": "^2.0.0",
"eslint-plugin-react": "^7.7.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"happypack": "^5.0.0-beta.3",
"html-webpack-plugin": "^3.2.0",
"postcss-cssnext": "^3.1.0",
"postcss-loader": "^2.1.3",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"style-loader": "^0.20.3",
"url-loader": "^1.0.1",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3"
},
"dependencies": {
"jquery": "^3.3.1"
}
}
webpack._dllconfig.js
const path = require('path');
//DllPlugin 用于打包出一个个单独的动态链接库文件
const DllPlugin = require('webpack/lib/DllPlugin');
module.exports = {
entry:{
react:['react','react-dom']
},
output:{
filename:'[name].dll.js',
path:path.resolve(__dirname,'dist'),
library:'_dll_[name]',
},
plugins:[
new DllPlugin({
name:'_dll_[name]',
path:path.join(__dirname,'dist','[name].mainfest.json')
})
]
}
.babelrc
{
"presets": [
"es2015",
"react"
]
}