webpack 前端工程化打包工具

1.安装webpack

先查看node npm 是否安装

node -v

npm -v

npm安装webpack

npm install webpack -g

初始化

npm init

填写一些项目信息

随便填写

　npm install webpack --save-dev

安装 html-webpack-plugin

npm install html-webpack-plugin --save-dev

安装webpack-dev-server

npm install -g  webpack-dev-server --save-dev

新建webpack.config.js

配置webpack.config.js

参考写法

var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');

//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');


module.exports = {
    // 入口文件 默认index.js
    entry  : APP_PATH,

    output : {
        path: BUILD_PATH,
        filename : 'bundle.js'
    },

    devServer:{
        historyApiFallback:true,
        inline:true
    },

    plugins : [
        new HtmlwebpackPlugin({
            title : 'hello word app'
        })

    ]

}

　配置package.json

找到scripts里面添加

"start": "webpack-dev-server --inline"

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --inline"
},

这里测试建立了一个APP文件夹和一个build文件夹

默认index.js

参考代码

var sub = require('./sub');
var app = document.createElement('div');
app.innerHTML = '<h1>Hello World-2222222222</h1>';
app.appendChild(sub());
document.body.appendChild(app);

sub.js

参考代码

//我们这里使用CommonJS的风格
function generateText() {
    var element = document.createElement('h2');
    element.innerHTML = "Hello h2 world";
    return element;
}
module.exports = generateText;

运行

npm start

这里有个问题，没有自动打开浏览器

手动输入 http://localhost:8080/ 才会出现的

这现在有实时刷新功能保存后就会刷新现在就是JS 文件这样需要测试HTML