webpack 菜鸟学习

Webpack是前端一个工具，可以让各个模块进行加载，预处理，再进行打包，它能有Grunt或Gulp所有基本功能。

之前使用的是gulp ，进行页面的css和js，打包压缩，配置简单，但是太过琐碎麻烦，使用sass时，直接在sass里导入sass文件，容易报错（不知道怎么回事）

webpack吸引我的地方：模块化，按需加载，压缩css，内嵌样式，独立样式。压缩js，压缩页面

参考文章：http://www.jianshu.com/p/42e11515c10f(1.0版本）

学习视频：http://www.imooc.com/learn/802（1.0版本）

自己安装webpack版本2.0（有些地方需要注意）

一. 安装

安装测试node和npm 

1 $ node -v
2 v6.11.0
$ npm -v
3.10.10

新建文件夹webpack,，进入项目目录webpack，进行安装：

1，使用npm init -y生成package.json文件

npm init -y

2，安装webpack（貌似全局安装webpack，可以直接在命令行输入webpack进行打包）

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

　测试webpack版本为：$ webpack -v         2.6.1

配置命令

这是在 package.json 文件中配置的

"scripts": {
    "build": "webpack  --profile --progress --colors --display-error-details",
    "dev": "webpack  --display-modules --profile --progress --colors --display-error-details",
    "dev-hrm": "webpack-dev-server --config"
  },

  • color 输出结果带彩色，比如：会用红色显示耗时较长的步骤

  • profile 输出性能数据，可以看到每一步的耗时

  • progress 输出当前编译的进度，以百分比的形式呈现

  • display-modules 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块

  • display-error-details 输出详细的错误信息

  • webpack-dev-server 将会开启热更新

  • 更多请参考官网 cli

// 开发模式
npm run dev

// 热更新模式
npm run dev-hrm

// 发布模式
npm run build

 

 

 

 

 

二. 配置

新建webpack.config.js

module.exports = {

　　entry:{
　　　　main:"./src/app.js",
　　} ,//已多次提及的唯一入口文件

  output: {
    path: __dirname + "/dist",//打包后的文件存放的地方
    filename: "js/[name].js",//打包后输出文件的文件名
　　//publicPath:'http://hotdeals.com/',//上线是替换的地址

  }
}

 

HtmlWebpackPlugin

依据一个简单的模板，帮你生成最终的Html5文件

npm install --save-dev html-webpack-plugin

 

    plugins:[
        new htmlWebpackPlugin({
            filename:'index.html',
            template:'index.html',
            inject:'body',
            title:'首页',
        }),
    ]

 

Loaders



鼎鼎大名的Loaders登场了！


Loaders是webpack中最让人激动人心的功能之一了。通过使用不同的loader，webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理，比如说分析JSON文件并把它转换为JavaScript文件，或者说把下一代的JS文件（ES6，ES7)转换为现代浏览器可以识别的JS文件。或者说对React的开发而言，合适的Loaders可以把React的JSX文件转换为JS文件。




Loaders需要单独安装并且需要在webpack.config.js下的modules关键字下进行配置，Loaders的配置选项包括以下几方面：




    

  • test：一个匹配loaders所处理的文件的拓展名的正则表达式（必须）
    • 

  • loader：loader的名称（必须）
    • 

  • include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
    • 

  • query：为loaders提供额外的设置选项（可选）
    • 





Babel




Babel其实是一个编译JavaScript的平台，它的强大之处表现在可以通过编译帮你达到以下目的：




    

  • 下一代的JavaScript标准（ES6，ES7），这些标准目前并未被当前的浏览器完全的支持；
    • 

  • 使用基于JavaScript进行了拓展的语言，比如React的JSX
    • 





// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react




 




{
                test: /\.js$/,
                loader: 'babel-loader',
                include: path.resolve(__dirname,'src'),
                exclude: path.resolve(__dirname,'node_modules'),
                query:{
                    presets:["es2015"]
                }
             }




CSS，CSS预处理器


首先安装postcss-loader 和 autoprefixer（自动添加前缀的插件）




npm install --save-dev style-loader css-loader






{
                 test:/\.css$/,
                 loader: [
                  'style-loader',
                  { loader: 'css-loader', options: { importLoaders: 1 } },
                  'postcss-loader'
                ]
             }






npm install --save-dev less-loader less 






npm install --save-dev postcss-loader autoprefixer




 


 在完成一系列的操作后




 


package.json:






{
  "name": "webpack",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack --config webpack.config.js --progress --display-module --colors"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^7.1.1",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "html-loader": "^0.4.5",
    "html-minify-loader": "^1.1.0",
    "html-webpack-plugin": "^2.28.0",
    "image-webpack-loader": "^3.3.1",
    "less": "^2.7.2",
    "less-loader": "^4.0.4",
    "postcss-loader": "^2.0.5",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "webpack": "^2.6.1"
  },
  "dependencies": {
    "acorn": "^5.0.3",
    "acorn-dynamic-import": "^2.0.2",
    "ajv": "^4.11.8",
    "anymatch": "^1.3.0",
    "align-text": "^0.1.4",
    "arr-diff": "^2.0.0",
    "arr-flatten": "^1.0.3",
    "array-unique": "^0.2.1",
    "arrify": "^1.0.1",
    "asn1.js": "^4.9.1",
    "async": "^2.4.1",
    "async-each": "^1.0.1",
    "balanced-match": "^1.0.0",
    "base64-js": "^1.2.0",
    "binary-extensions": "^1.8.0",
    "bn.js": "^4.11.6",
    "brace-expansion": "^1.1.8",
    "braces": "^1.8.5",
    "brorand": "^1.1.0",
    "browserify-aes": "^1.0.6",
    "browserify-cipher": "^1.0.0",
    "browserify-des": "^1.0.0",
    "browserify-sign": "^4.0.4",
    "browserify-zlib": "^0.1.4",
    "buffer": "^4.9.1",
    "buffer-xor": "^1.0.3",
    "builtin-modules": "^1.1.1",
    "builtin-status-codes": "^3.0.0",
    "camelcase": "^3.0.0",
    "center-align": "^0.1.3",
    "chokidar": "^1.7.0",
    "cipher-base": "^1.0.3",
    "co": "^4.6.0",
    "cliui": "^3.2.0",
    "browserify-rsa": "^4.0.1",
    "code-point-at": "^1.1.0",
    "assert": "^1.4.1",
    "concat-map": "^0.0.1",
    "console-browserify": "^1.1.0",
    "constants-browserify": "^1.0.0",
    "create-hmac": "^1.1.6",
    "create-ecdh": "^4.0.0",
    "crypto-browserify": "^3.11.0",
    "create-hash": "^1.1.3",
    "date-now": "^0.1.4",
    "decamelize": "^1.2.0",
    "des.js": "^1.0.0",
    "diffie-hellman": "^5.0.2",
    "domain-browser": "^1.1.7",
    "elliptic": "^6.4.0",
    "enhanced-resolve": "^3.1.0",
    "errno": "^0.1.4",
    "events": "^1.1.1",
    "error-ex": "^1.3.1",
    "expand-brackets": "^0.1.5",
    "expand-range": "^1.8.2",
    "extglob": "^0.3.2",
    "filename-regex": "^2.0.1",
    "fill-range": "^2.2.3",
    "find-up": "^1.1.2",
    "for-own": "^0.1.5",
    "evp_bytestokey": "^1.0.0",
    "get-caller-file": "^1.0.2",
    "fsevents": "^1.1.1",
    "glob-base": "^0.3.0",
    "for-in": "^1.0.2",
    "glob-parent": "^2.0.0",
    "graceful-fs": "^4.1.11",
    "has-flag": "^1.0.0",
    "hash.js": "^1.0.3",
    "hash-base": "^2.0.2",
    "hmac-drbg": "^1.0.1",
    "hosted-git-info": "^2.4.2",
    "html-webpack-plugin": "^2.28.0",
    "https-browserify": "^0.0.1",
    "ieee754": "^1.1.8",
    "ajv-keywords": "^1.5.1",
    "indexof": "^0.0.1",
    "invert-kv": "^1.0.0",
    "interpret": "^1.0.3",
    "is-arrayish": "^0.2.1",
    "is-binary-path": "^1.0.1",
    "is-buffer": "^1.1.5",
    "is-dotfile": "^1.0.3",
    "is-builtin-module": "^1.0.0",
    "is-equal-shallow": "^0.1.3",
    "is-extendable": "^0.1.1",
    "is-extglob": "^1.0.0",
    "is-fullwidth-code-point": "^1.0.0",
    "is-glob": "^2.0.1",
    "is-number": "^3.0.0",
    "is-posix-bracket": "^0.1.1",
    "is-primitive": "^2.0.0",
    "is-utf8": "^0.2.1",
    "json-loader": "^0.5.4",
    "json-stable-stringify": "^1.0.1",
    "jsonify": "^0.0.0",
    "kind-of": "^4.0.0",
    "isobject": "^2.1.0",
    "lazy-cache": "^1.0.4",
    "lcid": "^1.0.0",
    "load-json-file": "^1.1.0",
    "loader-runner": "^2.3.0",
    "longest": "^1.0.1",
    "micromatch": "^2.3.11",
    "memory-fs": "^0.4.1",
    "minimalistic-assert": "^1.0.0",
    "miller-rabin": "^4.0.0",
    "minimalistic-crypto-utils": "^1.0.1",
    "minimatch": "^3.0.4",
    "mkdirp": "^0.5.1",
    "minimist": "^0.0.8",
    "node-libs-browser": "^2.0.0",
    "normalize-path": "^2.1.1",
    "object.omit": "^2.0.1",
    "number-is-nan": "^1.0.1",
    "os-browserify": "^0.2.1",
    "os-locale": "^1.4.0",
    "normalize-package-data": "^2.3.8",
    "pako": "^0.2.9",
    "parse-asn1": "^5.1.0",
    "parse-glob": "^3.0.4",
    "parse-json": "^2.2.0",
    "path-browserify": "^0.0.0",
    "path-exists": "^2.1.0",
    "path-type": "^1.1.0",
    "pbkdf2": "^3.0.12",
    "pify": "^2.3.0",
    "path-is-absolute": "^1.0.1",
    "pinkie": "^2.0.4",
    "pinkie-promise": "^2.0.1",
    "preserve": "^0.2.0",
    "process": "^0.11.10",
    "process-nextick-args": "^1.0.7",
    "prr": "^0.0.0",
    "public-encrypt": "^4.0.0",
    "punycode": "^1.4.1",
    "querystring": "^0.2.0",
    "querystring-es3": "^0.2.1",
    "randomatic": "^1.1.7",
    "randombytes": "^2.0.5",
    "read-pkg": "^1.1.0",
    "read-pkg-up": "^1.0.1",
    "readdirp": "^2.1.0",
    "regex-cache": "^0.4.3",
    "repeat-element": "^1.1.2",
    "repeat-string": "^1.6.1",
    "require-directory": "^2.1.1",
    "right-align": "^0.1.3",
    "require-main-filename": "^1.0.1",
    "remove-trailing-separator": "^1.0.2",
    "safe-buffer": "^5.1.0",
    "ripemd160": "^2.0.1",
    "semver": "^5.3.0",
    "set-immediate-shim": "^1.0.1",
    "set-blocking": "^2.0.0",
    "setimmediate": "^1.0.5",
    "sha.js": "^2.4.8",
    "source-list-map": "^1.1.2",
    "spdx-correct": "^1.0.2",
    "spdx-license-ids": "^1.2.2",
    "stream-browserify": "^2.0.1",
    "spdx-expression-parse": "^1.0.4",
    "stream-http": "^2.7.1",
    "string-width": "^1.0.2",
    "strip-bom": "^2.0.0",
    "supports-color": "^3.2.3",
    "timers-browserify": "^2.0.2",
    "tapable": "^0.2.6",
    "to-arraybuffer": "^1.0.1",
    "tty-browserify": "^0.0.0",
    "uglify-to-browserify": "^1.0.2",
    "util": "^0.10.3",
    "url": "^0.11.0",
    "validate-npm-package-license": "^3.0.1",
    "util-deprecate": "^1.0.2",
    "vm-browserify": "^0.0.4",
    "watchpack": "^1.3.1",
    "webpack-sources": "^0.2.3",
    "webpack": "^2.6.1",
    "which-module": "^1.0.0",
    "window-size": "^0.1.0",
    "wordwrap": "^0.0.2",
    "wrap-ansi": "^2.1.0",
    "xtend": "^4.0.1",
    "y18n": "^3.2.1",
    "yargs": "^6.6.0",
    "yargs-parser": "^4.2.1"
  },
  "description": ""
}



View Code


webpack.config.js






var htmlWebpackPlugin =  require('html-webpack-plugin');
var path = require('path');

module.exports = {
    entry:{
        main:"./src/app.js",
    } ,
    output:{
        path:__dirname+'/dist',
        filename:'js/[name].bundle.js',
        //publicPath:'http://hotdeals.com/'
    },
    module:{
        loaders:[
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: path.resolve(__dirname,'src'),
                exclude: path.resolve(__dirname,'node_modules'),
                query:{
                    presets:["es2015"]
                }
             },{
                 test:/\.html/,
                 loader:'html-loader'
             },
             {
                 test:/\.css$/,
                 loader: [
                  'style-loader',
                  { loader: 'css-loader', options: { importLoaders: 1 } },
                  'postcss-loader'
                ]
             },{
                 test:/\.less$/,
                 loader:'style-loader!css-loader!postcss-loader!less-loader'
             },
             {
                 test:/\.(jpe?g|png|gif|svg)$/i,
                 loaders:[
                     'file-loader?limit=200&name=assets/[name]-[hash:5].[ext]',
                     {
                        loader: 'image-webpack-loader',
                        query: {
                          progressive: true,
                          optimizationLevel: 7,
                          interlaced: false,
                          pngquant: {
                            quality: '65-90',
                            speed: 4
                          }
                        }
                    }
                 ],
             },
        ]

    },

    plugins:[
        new htmlWebpackPlugin({
            filename:'index.html',
            template:'index.html',
            inject:'body',
            title:'首页',
        }),
    ]
} 



View Code


postcss.config.js(webpack2.0使用css添加前缀，看官网更好)






module.exports = {
  plugins: {
    'autoprefixer': {},
  }
}



View Code


 


项目文件:


index.html






<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <img src="src/assets/songzhixiao.jpeg" alt="">
    <div id="app"></div>
    <!-- 我是一行注释 -->
</body>
</html>



View Code


app.js






import './css/common.css';
import Layer from './components/layer/layer.js';


const App = function(){
    var dom = document.getElementById('app');
    var lay = new Layer();
    dom.innerHTML=lay.tpl;
}


new App();



View Code


 


 layer.js






import './layer.less'
import tpl from './layer.html'

function layer(){
    return {
        name:'layer',
        tpl: tpl
    }
}

export default layer;



View Code


 






            

            
posted @ 
2017-06-14 13:38 
JennyGao 
阅读(589) 
评论(0) 
编辑 
收藏 
举报