webpack4学习笔记-01

webpack4 学习笔记01

在学习过程发现用webpack4版本打包需要安装一个webpack-cli
这就说明了webpack 4将构建工具都放到了webpack-cli

step1

• 构建环境

cnpm install webpack -g   //全局安装webpack
cnpm install webpack-cli -g -D  //全局安装webpack-cli

建议大家全局安装webpack 这样子会比较好

step2

• 新建项目webpack-demo
• 新建一个在这个项目下新建index.html 跟index.js

//index.js
document.write('hello webpack4')

• 新建一个webpack配置文件webpack.config.js

var path = require('path');

module.exports = {
    entry: './index.js',
    output:{
    path:path.join(__dirname, 'dist'),
    filename:'bundle.js'
    }
};

• 在index.html引用

<script type="text/javascript" src="dist/bundle.js"></script>

• 初始化项目

npm init

• 在终端输入

webpack --config webpack.config.js

• 预览index.html