webpack-CSDN博客

安装以及操作流程

    npm install webpage -g       全局安装webpage   
    webpage  -help                    帮助命令
    过程：
    cd                                                          进入文件里面
    mkdir   文件名字-webpage                                    创建文件名字
    cd   文件名字-webpage                                                        再次进入项目根目录
    npm  init                                                    创建项目的配置文件   （也就是在项目的根目录下生成一个json）
    ls                                                            项目本地
    npm install webpage  save dev              项目本地再次安装webpage，保存到项目开发依赖里面 
    hbuilder    ./                                            打开编辑器
    pwd                                                          查看所在目录
    webpage   原来的文件.js  打包之后新生成的文件.js        （打包之后生成的文件.js，就是页面需要引入的文件）
    open  index.html                                       打开浏览器
2.    common.js 模块化
        module.exports  =  "mihao.net"        设置或者叫导出这段文字
        var  name  =  require（"./name"）    --->文件所在路径        引入这个模块
3.    loader    资源引入  （比如说在JS里面引入CSS，THML，JSON等等）    
       npm install css loader  style  loader    save dev          使用前先安装资源     
        在原来的js文件中用common.js引入
        require（"./style.css"）                        引入原 js 根目录下的 css 文件
        require（"style！css!./style.css"）       使用 loader 让 css 资源加载到 js 里面
4.    webpage 的配置文件：webpage.config.js
        在项目的根目录创建  webpage.config.js  文件
        配置文件内容：


http://jspang.com/2016/11/24/webpack/

http://blog.allenm.me/2012/12/whats-sourcemap/

webpack
1.安装node  npm
2 安装 webpack  、
npm   install  -g  webpack
3. 检查成功    webpack
4  在项目的根目录建立配置文件    mkdri   webpack.config.js
5 配置文件
在bundle.js中
module.exports={
    entry:"./index.js",    //入口文件
    output:{
        filename:"./bundle.js"
    }
}
6.配置成功后   命令行webpack
7  安装server   预览文件
npm  install  live-server -g
8   运行页面
live-server


多入口文件
module.exports={
    entry:{
        bundle1:'./main1.js',
        bundle2:'./main2.js'
    },
    output:{
        filename:'[name].js'
    }
};


 Css-loader
***只是在index.html文件中引入bunder.js文件   并没有引入css文件***

1.进入项目根目录   npm   init   初始化  生成package.json
2.  npm  install  style-loader  --sav-dev
3.  npm install  css-loader   --sav-dev
4   打包   webpack
5.  启动服务器   live-server

Img-loader

1.  npm install url-loader --sav-dev          
2.  npm install file-loader --sav-dev    


Uglify-js压缩
1.进入项目根目录   npm  init
2. npm install  --sav-dev    


复制代码