webpack 简单使用
webpack是目前前端开发最流行的打包工具之一,今天就一步一步构建
初始化npm工程
npm init 创建npm 工程 根据自己的需求进行配置项目
添加webpack 依赖
npm i webpack –save-dev
安装webpack
安装成功之后,在package.json中在 devDependencies中有 webpack
使用webpack打包 js
创建js文件
- 创建module.js
- 创建app.js
module.js 文件内容
export const log = function(){
// document.write('module.js loaded');
console.log('module.js loaded');
}
app.js
import moduleLog from './module.js';
import './style.css';
moduleLog();
document.write('app.js loaded');
- 创建index.html
<!DOCTYPE html>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
webpack测试 <script src="dist/bundle.js"></script>
创建完成之后,我们开始webpack打包 app.js
./node_modules/.bin/webpack app.js -o dist/bundle.js
执行完成 直接运行index.html 查看运行结果
app.js loadedmodule.js loaded
配置webpack.config.js
通常我们使用webpack命令行进行打包的时候,简单的话,还没有关系,要是想实现更多的功能的时候,我们不能一直添加很长很长的命令行吧,每次打包,你记得住吗?为此我们需要创建 webpack.config.js
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: './app.js',
output: {
path: path.join(__dirname,'dist'),
publicPath: './dist/',
filename: 'bundle.js'
},
devServer: {
port: 3000,//服务端口
publicPath: 'dist'//打包后资源路径,后面会详细解释
},
module: {
rules: [
{
test: /.css$/,
loader:
style-loader!css-loader
}
]
},
plugins: [
new UglifyJsPlugin()
]
}
entry: 打包入口
output: 输出配置
path: 路径配置
publicPath: 公共路径
filename:打包后的文件名称
devServer: 测试开发服务-可以选的,建议配置,可以实时编译
modules: 配置加载自定义loader
rules:表示loader的数组
test: loader处理文件的正则表达式
loader: loader的名称,通过npm i xxx-loader 安装的各种文件解析的loader
plugins: 工程使用到的插件
package.json
{
"name": "webpack_test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "3.3.2",
"style-loader": "1.0.1",
"uglifyjs-webpack-plugin": "2.2.0",
"webpack": "4.41.2",
"webpack-cli": "3.3.10",
"webpack-dev-server": "3.9.0"
}
}
这个是整个工程的package.json文件
body{
text-align: center;
padding: 100px;
color: #fff;
background-color: #09c;
}
style.css 文件