码迷,mamicode.com
首页 > Web开发 > 详细

webpack 入门

时间:2017-04-07 12:38:34      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:web   exp   out   bsp   init   ini   port   conf   nbsp   

 安装环境

  1.安装node.js(v0.6以上)

    2.安装到全局环境下

    npm  install webpack  -g

  3.本地安装,webpack依赖项目

    #进入项目目录(根目录)

    #创建填写package.json 文件

      npm init   

    #安装webpack依赖

      npm install webpack --save-dev  

  4.如果需要使用webpack开发工具,要单独安装

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

 配置文件

  <!--html-->

   <html>

      <head></head>

      <body>

        <div class="box"></div>

        <script src="bundle.js"></script>

      </body>

   </html>

   #假设文件都在根目录下

    //module.js

      module.export=‘ It works from module.js ‘ 

    /*style.css*/

      .box{width:100px;height:100px;background-color:red;}

    //entry.js

      require(‘./style.css‘)  //载入style.css

      document.write(‘ It works ‘)

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

   #安装loader

     npm install css-loader style-loader

   #运行

      method1  

          webpack entry.js bundle.js  --module-bind "css=style-loader!css-loader"

      method2

        #创建webpack.config.js

          webpack=require(‘webpack‘)

          module.exports={

              entry: ‘ ./entry.js ‘,

              output:{

               path: _dirname,

               filename: ‘ bundle.js ‘ 

              },

              module:{

                loaders[

                  {text: / \.css$ / , loader: ‘ style-loader!css-loader ‘}

                ]

              }

              plugins:[    //安装插件

                 . . .

              ]

          }

         运行 webpack

 

就是如此简单,你就运行起来了

参考:

https://webpack.bootcss.com/

http://webpackdoc.com/index.html

 

webpack 入门

标签:web   exp   out   bsp   init   ini   port   conf   nbsp   

原文地址:http://www.cnblogs.com/xshaohua-com/p/6677503.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!