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 文件
