正如楼上所说.你最好再编辑下你的问题.
建议你结合webpack的文档,与各教程对照学习.
根据你的目录结构,我推测下webpack.config.js的写法,我也是初学,有不对之处欢迎各位扶正.
假设你开发目录结构
text_pro/
|- node_modules/
|- src/
|- |- js/
|- |- |- main.js
|- |- |- Greeter.js
|- |- index.html
|- webpack.config.js
|- package.json
// webpack.config.js
var path = require(‘path’),
HtmlWebpackPlugin = require(‘html-webpack-plugin’),
webpack = require(‘webpack’);
module.exports = {
entry: {
// greeter: ‘./src/js/Greeter.js’, // 把greeter文件单独提取出来.
main: ‘./src/js/main.js’ // 如果不单独提取greeter文件,它将跟main打包到一起.
},
output: {
path: path.resole(__dirname, ‘dist’), // 输出路径
filename: ‘js/[name].[hash:5].js’ // 输出文件名,[hash:5]这里的:5意思是只要hash的5个字符,当时看各教程案例都没解释这个,搞的我一开始也不明白这是什么用意.
},
// 以上基本就算完成了webpack工程化,如果你要把引用的greeter文件提取出来就使用 CommmonsChunkPlugin插件.
plugins: [
new webpack.optimize.CommmonsChunkPlugin({name: ‘greeter’}),
new HtmlWebpackPlugin() // 该插件是把打包的JS所应用到的html中.
]
}
// package.json
{
“name”: “test_pro”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“dev”: “webpack-dev-server –progress –colors –inline”,
“build”: “webpack -p”
},
“author”: “”,
“license”: “ISC”,
“devDependencies”: {
“html-webpack-plugin”: “^2.29.0”,
“webpack”: “^3.0.0”,
“webpack-dev-server”: “^2.5.0”
}
}
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/203812.html原文链接：https://javaforall.net
