以下内容参考借鉴此文https://www.jianshu.com/p/b7f3cbfa7287
-
安装node环境 -- 下载地址 http://nodejs.cn/download/
-
在项目目录下输入npm init初始化一个node项目（先执行下面步骤，cnpm init代替npm init命令）
为了做接下来的事情舒服一点，请先执行 npm install -g cnpm --registry=https://registry.npm.taobao.org -
一路回车完成cnpm init，此时项目根目录生成了最基础的 package.json 文件
-
cnpm安装webpack和webpack-cli，cnpm install webpack --save-dev，cnpm install webpack-cli --save-dev
--save 会写入package.json 的 dependencies(运行依赖)
--save-dev 会写入package.json 的 devDependencies(开发依赖) 如babel，loader等模块 -
src目录下创建index.js，内容为
function test(){
console.log('test')
}
test()
- 根目录（不是必须这个位置）创建一个webpack.config.js, 以下是一个最基础的demo
var webpack = require('webpack');
var path = require('path');
var buildPath = path.resolve(__dirname, 'dist');//__dirname当前文件路径的绝对路径
//path.resolve是node.js语法路径解析(就是cmd里的cd),区分语法:连接路径：path.join
var config = {
entry: {
index: './src/index.js' //入口文件
},
output: {
filename: 'bundle.js', //编译后的文件名
path: buildPath //编译后的文件路径
}
};
module.exports = config; //输出模块一定是个对象
- webpack.json的scripts中新增以下内容,执行npm run dev 和 npm run build，然后就会生成dist目录下的bundle.js，区别是后者被压缩，此时index.html已经可以执行
"dev": "webpack --mode development",
"build": "webpack --mode production"
以上只完成了对入口index.js文件进行了编译，生成了编译后的bundle.js
接下来要安装html打包的插件 HtmlWebpackPlugin
- 执行cnpm install html-webpack-plugin --save-dev
9.修改webpack.config.js文件，增加
var HtmlWebpackPlugin = require('html-webpack-plugin');
//以下为config里的配置
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html'
})
]
10.执行npm run dev ，再运行打包后的dist/index.html，控制台输出了test；
安装简单的web服务器，并添加热加载 webpack-dev-server
- 执行cnpm install webpack-dev-server --save-dev
- 修改webpack.config.js,
devServer: {
contentBase:'./dist',
hot: true
},
13.修改webpack.json
"dev": "webpack-dev-server --mode development --open --hot",
- 执行npm run dev
出现奇怪报错现象请删除node_modules目录，重新执行cnpm install，可能是哪个包没下载全
到这里我已经运行成功一个webpack打包的最简单demo
接下来再写一点加载器，前往查看最简单的例子，边学边写webpack4 -- 各种加载器loader
网友评论