Webpack入门教程十八
91.webpack.config.js文件中entry的三种使用方式一字符串形式
/*
webpack.config.js中的内容如下
*/
module.exports = {
entry:'./src/script/main.js',
output:{
path:'./dist/js',
filename:'bundle.js'
}
}
92.项目目录结构如下
93.index.html文件内容如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>webpack demo</title> <link rel="stylesheet" href=""> </head> <body> <script type="text/javascript" src="bundle.js"></script> </body> </html>
94.main.js文件内容如下
function helloWorld(){}
95.package.json文件内容如下
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.26.1",
"style-loader": "^0.13.1",
"webpack": "^2.2.1"
}
}
96.在命令行运行cnpm run webpack命令
cnpm run webpack
97.查看dist/js/bundle.js文件是否存在,如果生成bundle.js文件表示配置成功
转载于:https://blog.51cto.com/suyanzhu/1899482