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

webpack学习笔记(一)

时间:2017-03-09 19:59:21      阅读:266      评论:0      收藏:0      [点我收藏+]

标签:针对   load   pat   目录   项目打包   这一   应用   base   md5   

写在前面:

  近几年前端发展迅速,各种新标准的出现,angular、vue、react等框架也是N足鼎立,nodejs的出现使得前端也跨足到server领域,还出现了前端工程化的概念,这一切都在提醒各位前端开发者(工程师)一件事情:我们时时刻刻都需要学习,更新自己的知识体系。

 

正文:

  webpack是前端工程化的一个代表,工程化也是一个比较大的概念,所以我会针对自己的学习过程写一个系列的学习笔记,此为第一篇。

  webpack负责将资源文件模块化,通过它的加载器加载使用,最终将项目打包发布。

 

  webpack的安装:

  通过nodejs安装,执行npm install webpack -g 全局安装,但是为了不依赖于全局webpack,最好在项目下再安装一份webpack,可以执行npm install webpack --save-dev命令。

  webpack的目录结构:

  技术分享

  

  webpack配置基础目录结构  
index.html   项目入口html文件
index.js js源文件
node_modules webpack安装文件
package.json

node项目的配置文件,webpack依赖npm创建。

(npm init -y 创建默认配置的package文件)

webpack.config.js webpack配置文件,配置了源文件和其通过打包的文件目录及名称
bundle.js 经过webpack打包后的js文件,最终被html引用的是这个文件

 

 

  

 

 

 

 

 

 

 

 

 

 

  webpack的实时build:

  项目根目录下运行 webpack --watch 可以监听所有文件变化并实时build到bundle.js。

 

  webpack的实时刷新页面:

  上面的实时build是文件层面的,需手动刷新浏览器才能更新页面效果,所以 webpack-dev-server 就登场了。

  首先全局安装webpack-dev-server模块,执行命令: npm install webpack-dev-server -g

  安装完成后,在项目根目录下执行命令: webpack-dev-server  (webpack-dev-server --hot --inline) , 即在本地8080端口启动了服务器并部署了项目。访问 http://localhost:8080/ 查看。执行--hot --inline命令后,每次js源文件发生改变,都会自动触发build,在内存中生成新的文件(:bundle.js文件此时不会发生变化,要执行webpack命令后变化才会反映到bundle.js文件中),并反映到页面上(相当于刷新了一次页面)。

    *注意*:运行webpack-dev-server命令时,webpack配置项的output.path需要是绝对路径或‘/’开头!

 

  webpack的加载器 loader  

  1) css、style loader:

    安装: npm install style-loader css-loader --save-dev

    config配置: module.exports增加module配置如下:

module: {
        loaders: [
            { test: /\.css$/, loaders: [‘style‘, ‘css‘] }
        ]
    }

    使用: import ‘css/public.css‘

  2)autoprefixer loader -- 自动添加浏览器前缀:

    安装: npm install autoprefixer-loader --save-dev

    config配置:module中添加一个loader如下:

loaders: [
            { 
                test: /\.css$/, 
                loaders: [‘style‘, ‘css‘] 
            }, {
                test: /\.css$/,
                loader: ‘style!css!autoprefixer?{browsers:["last 2 version", "> 1%"]}‘,
            }
        ]

    使用:css中配置属性不需要带前缀了,autoprefixer会自动添加。

  3)file loader

    安装: npm install file-loader --save-dev

    配置:

    使用:   

var url = require("file-loader!./a.png");

//var url = require("file-loader?emitFile=false!./a.png");

//模板应用
"file-loader?name=[name].[ext]&publicPath=assets/foo/&outputPath=app/images/"
require("file-loader?name=js/[hash].script.[ext]!./javascript.js");
// => js/0dcbbaa701328a3c262cfd45869e351f.script.js

require("file-loader?name=html-[hash:6].html!./page.html");
// => html-109fa8.html

require("file-loader?name=[hash]!./flash.txt");
// => c31e9820c001c9c4a86bce33ce43b679

require("file-loader?name=[sha512:hash:base64:7].[ext]!./image.png");
// => gdyb21L.png
// use sha512 hash instead of md5 and with only 7 chars of base64

require("file-loader?name=img-[sha512:hash:base64:7].[ext]!./image.jpg");
// => img-VqzT5ZC.jpg
// use custom name, sha512 hash instead of md5 and with only 7 chars of base64

require("file-loader?name=picture.png!./myself.png");
// => picture.png

require("file-loader?name=[path][name].[ext]?[hash]!./dir/file.png")
// => dir/file.png?e43b20c069c4a01867c31e98cbce33c9

 

  4)url loader -- 返回file的dataurl形式
    安装: npm install url-loader --save-dev

  5)其他各种loader

 

  webpack的打包:

  执行webpack命令即可。

 

问题

  执行webpack-dev-server时,经测试,必须配置output.publicPath,页面才能实时反映js源文件的变化。暂不知是什么原因,希望有知道的同学不吝赐教!

 

webpack学习笔记(一)

标签:针对   load   pat   目录   项目打包   这一   应用   base   md5   

原文地址:http://www.cnblogs.com/zt-blog/p/6527125.html

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