webpack的学习感悟

https://github.com/webpack/webpack webpack gethub地址。

http://webpack.github.io/ webpack 官网

前言

webpack作为现在比较火的前端框架，可以打包js、css、html、less、jade等文件，并且应用比较广泛。甚至一些比较火的前端框架都在使用webpack打包工具，例如vue，react等等。本着互联网的分享精神，我就将我自己的理解和想法分享给大家。

安装

安装之前如果会用cnpm的尽量用cnpm这样会快一点，本案例默认电脑上没有安装cnpm镜像。

1、设置全局webpack

npm install -g webpack

2、进入目标文件夹，本人使用文件目录（E:\webpack-test）

cd E:\webpack-test

3、在项目中引导创建一个package.json文件

npm init （初始化过程就默认按回车就行了）

4、安装webpack

npm install webpack --save-dev （ --save-dev 安装包信息将加入到devDependencies（开发阶段的依赖），所以开发阶段一般使用它）安装完成后会在项目目录下出现node_module文件夹就证明安装成功了

跟我一起使用

案例1

1、在项目目录下新建一个test1.js文件，随便写一个函数。然后进行打包

function test(){console.log('1')
}

2、开始打包

在命令行内输入webpack test1.js（文件入口） test-pack.js（打包完成名字）

3、打包完成

　　打包完成后命令行会返回几个参数，1、Hash - 哈希值2、Version - webpack的版本、 Time：打包耗费时长。

　　另外还返回一个列表Asset - 这次生成的文件、Size - 打包后的大小、Chunks - 这次打包的分块、Chunk Name - 这次打包的块名称。

4、打开test-pack.js文件

我们发现，文件好像比没有打包之前大了，因为webpack打包之前会生成一些需要的内置函数，在页面的最下方可以看见我们打包的代码。

webpack打包css文件

注意webpack中在js文件内是可以引用css文件的。

1、新建一个css文件名称叫做style.css

　　在里面随便写一些css代码。

2、在test.js文件中引用css

　　test.js全部代码

require('./style.css')
function test() {console.log('1')
}

3、打包css 但是打包之前需要安装css-loader、和style-loader否则会报错。

　　npm install css-loader style-loader --save-dev style-loader 是让css生效，生效后的效果就是在html页面的head标签里自动新建style标签并插入代码（这个以后的案例会讲）、css-loader是让打包软件识别css并处理css文件。

4、运行打包命令

　　webpack test1.js test-pack.js - 但是还会报错提示- You may need an appropriate loader to handle this file type 明明已经安装了loader怎么还报错呢。

　　解决错误，根目录也就是webpack-test 下新建webpack.config.js文件写入如下代码。即可解决。错误原因是没有指定loader。

var Webpack = require("webpack");
module.exports = {module: {loaders: [{test: /\.css$/,loader: "style-loader!css-loader"}]}
}

　　或者引入css时候增加css-loader!,前缀即可

require('css-loader!./style.css');

5、打包完成

打包完成后我们看test-pack文件中又多出了好多webpack引入的一些代码，在代码的中间部分可以看见我们刚才写的css，这说明我们的css已经引入成功了。

如何实现多文件打包

　　在一些单页面应用中一般都会打包成一个文件，那例如像官网（举例）那种也可以打包成为多页应用。但是要如何配置呢。很简单只需要配置webpack.config.js文件即可。

　　代码如下，配置完成后在命令行内输入 webpack 就可以了，因为已经配置了webpack.config.js。就不用像上面案例那样输入很长一段语句了。

var path = require('path') //这里是引入了node.js的path模块，
module.exports = {entry: {main1:'./src/script/main.js',    //如果这的value指定的是一个数组，那么就相当于将两个文件打包成一个文件。main2:'./src/script/main2.js',}, //多文件入口文件配置  如果是单文件只需要写一个.string路径即可。
    output: {path: path.resolve(__dirname, './dist/js'), //打包后的文件的绝对路径地址filename: '[name].js' //打包后的文件名称[name]就像当月entry下的key（main1）还有hash、chunkhash等选项，但一般不怎么用所以呢，就不只拿name举例了。如果这里不写[]变量占位符而是一个普通的字符串的话打包文件会被覆盖，最后只会留下最后打包那个文件。
    },
};

chunkhash使用后文件生成动态名称，那么script要怎么引用呢。html-webpack-plugin

　　在一些大型项目中需要上传到服务器远程仓库，这时候chunkhash就非常有效，因为chunkhash是当文件修改后他才会发生改变，对代码的控制性比较强。但是chunkhash改变后 script 的引用名称也需要进行更改，这样做是不是很麻烦呢，但是有一种方法可以解决。请看代码。

　　1、安装 npm install html-webpack-plugin --save-dev

var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: {main1: './src/script/main.js',main2: './src/script/main2.js',}, //多文件入口文件配置  如果是单文件只需要写一个.string路径即可。
    output: {path: path.resolve(__dirname, './dist/js'), //打包后的文件地址filename: '[name]-[chunkhash].js' //打包后的文件名称[name]就像当月entry下的key（main1）
    },plugins: [new htmlWebpackPlugin({template: 'index.html',  //指定模板文件，如果不指定的话会自动生成一个新建的index.html文件一起打包到path指定的打包地址。如果指定了的话，会将指定的模板打包后放入path指定的打包地址，然后自动使用script的 src引入entry下的所有文件minify:{ //代码压缩removeComments:true,  //删除代码内的注释collapseWhitespace:true,//删除代码内的空格
            }})]
};

使用html-webpack-plugin打包多html文件

使用html-webpack-plugin打包多文件其实很简单，因为plugins接收的是一个数组。所以只要多new htmlwebpackPlugin即可。

　　请看代码

var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: {main1: './src/script/main.js',a: './src/script/a.js',b: './src/script/b.js',c: './src/script/c.js',}, //多文件入口文件配置  如果是单文件只需要写一个.string路径即可。
    output: {path: path.resolve(__dirname, './dist/js'), //打包后的文件地址filename: '[name]-[chunkhash].js' //打包后的文件名称[name]就像当月entry下的key（main1）
    },plugins: [new htmlWebpackPlugin({filename: "a.html",  //打包后的html文件名称 template: 'index.html',   //理解为要打包那个文件，其实这里专业解释是使用那个模板。inject: 'body',    // 将JavaScript模块放在那个标签下，chunks: ['a', 'main1']//要使用那个JavaScript模块   也可是使用excludeChunks，excludeChunks和chunks相反，excludeChunks是排除entey下的那个模块的使用，例如 excludeChunks: ['a']  那么就是除了a意外entry下的模块都使用。
        }),new htmlWebpackPlugin({filename: "b.html",template: 'index.html',inject: 'body',chunks: ['b']}),new htmlWebpackPlugin({filename: "c.html",template: 'index.html',inject: 'body',chunks: ['c']})]
};

使用babel-loader将要es6语法转换为es5语法

安装

npm install babel-loader babel-core babel-preset-latest --save-dev

设置 webpack.config.js文件。打包完成后就将es6语法转换为es语法了。

var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {entry: './src/app.js',output: {path: path.resolve(__dirname, './dist/js'),filename: 'js/[name].bundle.js'},module: {loaders: [{test: /\.js$/,loader: 'babel-loader',exclude:  path.resolve(__dirname, './node_modules'), //排除那些文件不打包 include 制定打包那些
                query: {presets: ['latest']   //这里可以指定想转换为什么语法。例如2015 }},{test: /\.css$/,loader: "style-loader!css-loader"}]},plugins: [new htmlWebpackPlugin({filename: 'index.html',template: 'index.html',inject: 'body'     //将js文件插入body文件内
        })]
}

也可以将配置信息写在package中

注意：直接写在对象中就可以

 "babel": {"presets": ["latest"]},

使用postcss-loader 实现webpack对css语法打包，并对浏览器兼容性样式进行处理。

安装：

npm install postcss-loader postcss-import autoprefixer cssnano --save -dev

注意：如果没有安装css-loader 和style-loader 的同学记得安装，上述案例已经进行讲解。

var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {entry: './src/app.js',output: {path: path.resolve(__dirname, './dist/js'),filename: 'js/[name].bundle.js'},module: {loaders: [{test: /\.css$/,use: ['style-loader',{loader: 'css-loader',options: {importLoaders: 1} //这里可以简单理解为，如果css文件中有import 进来的文件也进行处理
                    },{loader: 'postcss-loader',options: {           // 如果没有options这个选项将会报错 No PostCSS Config foundplugins: (loader) => [require('postcss-import')({root: loader.resourcePath}),require('autoprefixer')(), //CSS浏览器兼容require('cssnano')()  //压缩css
                            ]}}]}]},plugins: [new htmlWebpackPlugin({filename: 'index.html',template: 'index.html',inject: 'body'     //将js文件插入body文件内
        }),]
};

webpack怎么实现打包less，sass

安装

　　npm install less-loader css-loader postcss-loader less-loader less --save-dev

webpack.config.js 代码

var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {entry: './src/app.js',output: {path: path.resolve(__dirname, './dist/js'),filename: 'js/[name].bundle.js'},module: {loaders: [{test: /\.less$/,     //如果使用sass的话就把less换成sass即可，但记得安装sass-loaderuse: ['style-loader',{loader: 'css-loader',options: {importLoaders: 1}},{loader: 'postcss-loader',options: {plugins: (loader) => [require('postcss-import')({root: loader.resourcePath}),require('autoprefixer')(), //CSS浏览器兼容require('cssnano')()  //压缩css
                            ]}},{loader: 'less-loader'    //如果使用sass的话就把less换成sass即可，但记得安装sass-loader}]},]},plugins: [new htmlWebpackPlugin({   //配置html打包参数filename: 'index.html', //打包后的名字template: 'index.html',// 打包所使用的模板，理解为使用的html。inject: 'body'     //将js文件插入body文件内
        }),]
};

入口文件app.js代码

import  './conponents/layer/layer.less'

使用html-loader、实现对html引用的打包。

安装

npm install html-loader --save-dev

由于此案例稍有些繁琐我将源码发送给大家。 http://pan.baidu.com/s/1nv4Zf7r

webpack.config.js

var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {entry: './src/app.js',output: {path: path.resolve(__dirname, './dist/js'),filename: 'js/[name].bundle.js'},module: {loaders: [{test: /\.html/,loader: 'html-loader'},]},plugins: [new htmlWebpackPlugin({filename: 'index.html',template: 'index.html',inject: 'body'     //将js文件插入body文件内
        }),]
};

入口文件app.js代码

import layer from './conponents/layer/layer.js'
const App = function () {var dom = document.getElementById('app');var lay = new layer();dom.innerHTML = lay.tpl;};
new App();

被引入文件layer代码

import tpl from './layer.html';
import  './layer.less'
function layer() {return {name: 'layer',tpl: tpl}
}export  default layer;

主文件index.html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

怎么对html模板进行传参—ejs-loader

安装：cnpm install ejs-loader --save-dev

webpack.config.js

var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {entry: './src/app.js',output: {path: path.resolve(__dirname, './dist'),filename: 'js/[name].bundle.js'},module: {loaders: [{test: /\.tpl$/,loader: 'ejs-loader'},{test: /\.html/,loader: 'html-loader'},{test: /\.less$/,use: ['style-loader',{loader: 'css-loader',options: {importLoaders: 1}},{loader: 'postcss-loader',options: {plugins: (loader) => [require('postcss-import')({root: loader.resourcePath}),require('autoprefixer')(), //CSS浏览器兼容require('cssnano')()  //压缩css
                            ]}},{loader: 'less-loader'}]},{test: '/\.js$',loader: 'babel-loader',exclude: path.resolve(__dirname, './node_modules'), //排除那些文件不打包 include 制定打包那些
                query: {presets: ['latest']}},{test: /\.css$/,use: ['style-loader',{loader: 'css-loader',options: {importLoaders: 1} //这里可以简单理解为，如果css文件中有import 进来的文件也进行处理
                    },{loader: 'postcss-loader',options: {           // 如果没有options这个选项将会报错 No PostCSS Config foundplugins: (loader) => [require('postcss-import')({root: loader.resourcePath}),require('autoprefixer')(), //CSS浏览器兼容require('cssnano')()  //压缩css
                            ]}}]},{test: /\.(png|jpg|gif|svg)$/i,loaders: ['url-loader?limit=20&name=assets/[name]-[hash:5].[ext]','image-webpack-loader']// loader: 'url-loader', //file-loader// query: {//     limit: 20000,//     name: 'assets/[name]-[hash:5].[ext]'// }
            }]},plugins: [new htmlWebpackPlugin({filename: 'index.html',template: 'index.html',inject: 'body'     //将js文件插入body文件内
        }),]
};

layer.tpl 源码

    <div class="layer"><img src="${require('../../essets/bg.jpg')}" alt=""><div>this is<%= name %></div><% for (var i = 0; i < arr.length; i++){ %><%= arr[i] %><% } %></div>

layer.js 源码

import tpl from './layer.tpl';
import  './layer.less'
function layer() {return {name: 'layer',tpl: tpl}
}
export  default layer;

入口文件 app.js源码

import layer from './conponents/layer/layer.js'
const App = function () {var dom = document.getElementById('app');var lay = new layer();dom.innerHTML = lay.tpl({name: 'john',arr: ['a', 'b', 'c']});
};
new App();

如果对图片进行压缩或者转换为bese64

安装 npm install image-webpack-loader url-loader--save-dev

当然也可以容file-loader 代替 url-loader

limit=20000的意思是当图片小于20000k的时候压缩为bese64 编码 name=img/[name] 就是讲图片存储到什么位置，{name}是个占位符，代表的事图片原来的名字，[ext]是文件原本的后缀名。

            {test: /\.(png|jpg|gif|svg)$/i,loaders: ['url-loader?limit=20000&name=img/[name].[ext]','image-webpack-loader']}

转载于:https://www.cnblogs.com/waitforyou/p/6842623.html