webpack入门秘籍

首先建立好文件夹目录 而且安装好NODE git webpack

安装

npm i -g webpack

分别内容写入到对应的文件

app.js

import modules from './modules';
(前面的modules 表明自定义接收"./moudules"里面default的函数;)
modules();
执行方法
document.write('I am App');

index.html

引用生成好的文件
<script src="./dist/bundles.js" charset="utf-8"></script>

modules.js

导出默认的方法，使用default系统自动生成默认方法
export default function () {
  console.log('I am modules');
}

#在项目的根目录打开GIT/node 输入

webpack ./app.js ./dist/bundles.js 回车
  eg：wepack  入口文件  新文件放的位置

#能够看到dist目录下多了一个bundles.js文件，执行index.html文件,并打开控制台，会看到输出以下：

若是你上面明白了webpack简单的工做原理，那么下面开始修炼webpack进阶版

1.一样先进行文件目录建立

前面的app.j、index.html、modules.js、都是同样的类容，多建立了两个文件

在项目根目录下面执行

npm i -D webpack-dev-server    回车
 npm init -y      <执行完成后会自动建立一个package.json>
 <若是会用yarn，那最好>

####在手动建立一个webpack.config.js文件内容以下：

const path = require('path');
    module.exports = {
        //入口文件地址
        entry: './app.js',
        //输入文件的地址
        output: {
            //__dirname表明node打开文件的根目录
            path: path.join(__dirname, 'dist'),
            //文件存放的目录位置
            publicPath: '/dist/',
            //新文件的名字
            filename: 'bundle.js'
        },
        //建立一个端口为3000，而且执行的目录为/dist/
        devServer: {
            publicPath: "/dist/",
            //端口为3000
            port: 3000
        }
    }

###准备工做都作完成的时候，模块也装好了就会出现下图内容

打开package.json文件

在scripts的对象里面添加
"dev":"webpack-dev-server"

##打开根目录执行
npm run dev 回车
或者输入webpack 回车

打开index.html 文件看效果就成功了

是否对webpack有必定的初步了解；后期会跟新文件转码，less sass 等一系列操做，若是这篇文章对你有帮助，那就收藏分享出去吧！