webpack

作者: 奶瓶SAMA | 来源:发表于2017-03-14 11:53 被阅读0次

    http://webpackdoc.com/usage.html

    npm install webpack -g
    npm init -y
    npm install webpack --save-dev

    新建入口文件entry.js
    打包入口文件webpack entry.js xxx.js

    举例说明:导出/入其他的模块 module.exports、require、

    webpack默认只会处理js,如果使用它处理其它的文件比如html css json等等,需要安装对应的loader,loader就是转换器,他可以把资源从一种形式,转换成另一种形式,最终得到的还是js文件。

    处理css文件npm install css-loader style-loader --save-dev
    引入css文件 require('style-loader!css-loader!./css.css');

    webpack的配置文件是webpack.config.js

    module.exports={
        entry:'./entry.js',
        output:{
            path:__dirname,
            filename:'build.js'
        },
        module:{
            loaders:[
                {test:/\.css/,loader:'style-loader!css-loader'}
            ]
        }
    };
    

    生成开发用的服务器,在文件变化的时候自动打包,刷新页面
    npm install webpack-dev-server -g
    npm install webpack-dev-server --save-dev //把依赖写入package.json
    webpack-dev-server --inline --hot自动刷新页面

    相关文章

      网友评论

          本文标题:webpack

          本文链接:https://www.haomeiwen.com/subject/nqncnttx.html