webpack核心概念:
- 入口(entry)
指定webpack开始构建的入口模块，从该模块开始构建并计算出直接或间接依赖的模块或者库 - 输出(output)
告诉webpack如何命名输出的文件以及输出的目录
path ：入口文件最终要输出到哪里，
filename：输出文件的名称
publicPath：公共资源路径 - loader
由于webpack只能处理javascript，所以我们需要对一些非js文件处理成webpack能够处理的模块，比如sass文件 - 插件(plugins)
-chunkcoding split的产物，我们可以对一些代码打包成一个单独的chunk，比如某些公共模块，去重，更好的利用缓存。或者按需加载某些功能模块，优化加载时间。在webpack3及以前我们都利用CommonsChunkPlugin将一些公共代码分割成一个chunk，实现单独加载。在webpack4 中CommonsChunkPlugin被废弃，使用SplitChunksPlugin
webpack安装流程
- step1:首先安装Node.js
- step2:通过全局先将webpack指令安装进电脑中
npm install webpack -gnpm install --save-dev webpack - step3:
npm init(会生成一个package.json的文件)
webpack配置
- step1: 创建项目文件夹, 例如webpack_test
- step2: 在你的项目目录下创建webpack.config.js配置文件, 通过这个文件进行webpack的配置, 并且还要创建一些路径保存基本文件,例如创建一个src文件夹，里面分别创建js,css,img文件夹
- step3：在src的js下创建一个入口文件, 我创建的叫做entry.js, 在项目目录再创建一个index.html用来调试使用. 编写webpack.config.js文件,
//webpack.config.js
module.exports = {
entry : './src/js/entry.js',//入口文件
output : {//输出文件
filename : 'index.js',//输出文件名
path : __dirname + '/out'//输出文件路径
},
}
index.html和入口文件entry.js
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>ss</title>
</head>
<body>
111
<script src="./out/index.js"></script>//注意在这里引入的是打包完成的js文件
</body>
</html>
//entry.js
console.log('1234');
webpack loader加载器
npm install babel-loader babel babel-core css-loader style-loader url-loader file-loader less-loader less --save-dev
修改webpack.config.js文件
module.exports = {
entry : './src/js/entry.js',
output : {
filename : 'index.js',
path : __dirname + '/out'
},
module : {
rules: [
{test: /.js$/, use: ['babel-loader']},
{test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style标签里*/
//{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css变成文件通过link标签引入*/
{test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析图片*/
{test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成浏览器可以识别的css语言*/
]
},
}
webpack插件使用
修改webpack.config.js
var webpack = require('webpack');
var webpack = require('webpack');
var uglifyPlugin = new webpack.optimize.UglifyJsPlugin({minimize: true});//代码压缩
var CommonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin('common');//把公共模块提取出来, 并取名为'common'(名字自起), webpack之后再out文件夹下生成common.js, 测试时记得引入提取出来的公共模块js文件
var ExtractTextPlugin = require("extract-text-webpack-plugin");//将css独立引入变成link标签形式, 使用该插件需要独立下载'npm install extract-text-webpack-plugin --save-dev', 同时下面的rules也必须更改
var providePlugin = new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery'});//引入jquery
module.exports = {
entry : {index: './src/js/entry.js', index2: './src/js/entry2.js'},
output : {
filename : '[name].js',
publicPath: __dirname + '/out',
path : __dirname + '/out'
},
module : {
rules: [
{test: /.js$/, use: ['babel-loader']},
//{test: /.css$/, use: ['style-loader', 'css-loader']},
{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},
{test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},
{test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
]
},
plugins: [uglifyPlugin, CommonsChunkPlugin, new ExtractTextPlugin('[name].css'),providePlugin]//插件集合
}
webpack服务器
首先先定位目录输入命令 npm install webpack-dev-server -g, 修改webpack.config.js文件
publicPath: 'http://localhost:8080/out',
package.json
{
"name": "pmall",
"version": "4.2.6",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --port 4000 --hot --host 0.0.0.0 --content-base ./build --config ./build/webpack.config.dev.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.5.3"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"babel-runtime": "^6.26.0",
"cross-env": "^5.1.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"html-loader": "^0.5.1",
"html-webpack-plugin": "^2.30.1",
"node-sass": "^4.6.0",
"postcss-loader": "^2.0.9",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"uglifyjs-webpack-plugin": "^1.0.1",
"url-loader": "^0.6.2",
"vue-loader": "^13.4.0",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.3",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4"
},
"description": ""
}
网友评论