美文网首页
webpack基础总结

webpack基础总结

作者: qwerer | 来源:发表于2016-12-23 11:59 被阅读0次

    1.使用#

    webpack版本问题###

    目前有两个主版本,一个是在 master 主干的稳定版,一个是在 webpack-2 分支的测试版,测试版拥有一些实验性功能并且和稳定版不兼容,在正式项目中应该使用稳定版。

    #查看webpack版本信息
    npm info webpack
    
    #安装指定版本webpack
    npm install webpack@1.14.0 --save-dev
    
    

    安装###

    npm install webpack -g
    

    查看###

    webpack -h
    

    使用项目本地版本的webpack###

    # 进入项目目录
    # 确定已经有 package.json,没有就通过 npm init 创建
    # 安装 webpack 依赖
    npm install webpack --save-dev
    

    webpack开发工具###

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

    2.使用#

    ①创建一个静态页面index.html和一个js入口文件entry.js:####

    <!-- index.html -->
    <html>
    <head> <meta charset="utf-8"></head>
    <body> 
        <script src="bundle.js"></script>
    </body>
    </html>
    
    // entry.js
    document.write('It works.')
    

    ②编译

    webpack entry.js bundle.js
    

    ③添加模块并修改entry.js

    document.write(require('./module.js')) // 添加模块
    

    Loader#

    安装使用Loader####

    #entry.js
    require('./style.css')
    
    #有些环境下可能使用双引号
    webpack entry.js bundle.js --module-bind 'css=style!css'
    

    相关文章

      网友评论

          本文标题:webpack基础总结

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