这是一个可以打包css/img/js的webpack项目。es6可以自动编译。内置简单的服务器。可以做到热加载，npm run dev可以开始。npm start可以编译。img、css文件都会打包到单独的文件夹里。dist目录不需要手动清除。
- 新建项目文件夹，进入该目录。cmd进入命令模式
- 初始化项目依赖。webpack需要npm安装插件
npm init -y - 下面json文件替换npm init新建的package.json。然后npm install。
{
"name": "jianshu",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open",
"start": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^1.0.1",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^4.0.0-beta.3",
"mini-css-extract-plugin": "^0.4.4",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "^2.0.1",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10",
"webpack-merge": "^4.1.4"
}
}
style-loader css-loader：css文件加载器
file-loader：图片加载器
clean-webpack-plugin：清理编译目录 文件夹
webpack-dev-server：webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。
html-webpack-plugin：虽然在 dist/ 文件夹我们已经有 index.html 这个文件，然而 HtmlWebpackPlugin 还是会默认生成 index.html 文件。这就是说，它会用新生成的 index.html 文件，把我们的原来的替换。
babel-loader@7 babel-core :bable解析js为浏览器支持的es5标准
babel-env-preset: 解析Es6
babel-preset-react：解析JSX
4.新建webpack.config.js
CleanWebpackPlugin :可以清除编译目录，不用每次编译都加入重复的文件。
HtmlWebpackPlugin ：生成新的html文件。注意在编码目录下定义一个模板html文件。不然dist目录是不会更新的。
MiniCssExtractPlugin：将css文件打包成独立的css文件。
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
//多入口文件
entry: './src/main.js',
devtool: 'inline-source-map',//调试工具
devServer: {
contentBase: './dist',
//下载的webpack-dev-server，可以提供简单的服务器以上配置告知
// webpack-dev-server，在 localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。
hot: true, //热加载
inline: true,//实时刷新
},
plugins: [
new CleanWebpackPlugin('dist/*.*', {
root: __dirname,
verbose: true,
dry: false
}),//下载的clean-webpack-plugin插件，清理 /dist 文件夹
new HtmlWebpackPlugin({
template: __dirname + "/src/index.html"//new 一个这个插件的实例，并传入相关的参数
}),//生成新的index.html文件
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new MiniCssExtractPlugin({
filename: "css/[name].[chunkhash:8].css",
chunkFilename: "css/[id].css"
})
],
output: {
filename: "bundle-[hash].js",//打包后输出文件的文件名
path: path.resolve(__dirname, 'dist/'),
publicPath: 'dist/'
},
// 模块对象
module: {
// 规则
rules: [
/*{
// 正则匹配所有以.css结尾的文件
test: /\.css$/,
// 使用css-loader和style-loader依次对css文件进行处理
// 按照数组中从后往前的顺序
use: [ 'style-loader', 'css-loader' ]
},*/
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader?name=images/[name].[hash:6].[ext]'
]
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
}
};
-
创建这样的项目框架
捕获.PNG
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrap"></div>
<div class="wrap2"></div>
</body>
</html>
main.js
import './js/index'
import './js/app'
import './css/style.css'
网友评论