webpack图片压缩-webpack配置css兼容性和压缩

具体操作

1、若安装过 image-webpack-loader 先卸载

yarn remove image-webpack-loader 或者 npm uninstall image-webpack-loader

2、使用 cnpm , 这一步意思就是安装 cnpm 然后将全局的 registry 设置成阿里的镜像,国内阿里比较快

npm install cnpm -g --registry=

npm config get registry //检查是否设置成功

3、使用 cnpm 安装 image-webpack-loader 会很快就安装好

cnpm install --save-dev image-webpack-loader

扩展

扩展原文链接:

--save-dev 和--save的区别

使用命令 --save 或者说不写命令 --save ,都会把信息记录到 dependencies 中;

注: 如果先前尝试使用 yarn 或 npm 安装过,一定要先卸载掉用 cnpm 安装

第一步:需要安装 postcss , postcss-loader 和 postcss-preset-env 三个包。

第二步:在 的 css 的 loader 里配置 postcss-loader 。

第三步:配置 ,然后配置 postcss-preset-env 插件,用来读取 文件中的 browserslist 配置。

第四步:在 文件添加 browserslist ,配置需要支持哪些浏览器。

压缩 css 需要用到 optimize-css-assets-webpack-plugin 。

用法很简单,引入插件之后,在 plugins 中实例化即可。

1. 为什么用 webpack?

他像 Browserify, 但是将你的应用打包为多个文件. 如果你的单页面应用有多个页面, 那么用户只从下载对应页面的代码. 当他么访问到另一个页面, 他们不需要重新下载通用的代码.

他在很多地方能替代 Grunt 跟 Gulp 因为他能够编译打包 CSS, 做 CSS 预处理, 编译 JS 方言, 打包图片, 还有其他一些.

它支持 AMD 跟 CommonJS, 以及其他一些模块系统, (Angular, ES6). 如果你不知道用什么, 就用 CommonJS.

2. Webpack 给 Browserify 的同学用

对应地:

browserify >

webpack

Webpack 比 Browserify 更强大, 你一般会用 来组织各个过程:

//

= {

entry: './',

output: {

filename: ''

}

};

这仅仅是 JavaScript, 可以随意添加要运行的代码.

3. 怎样启动 webpack

切换到有 的目录然后运行:

webpack 来执行一次开发的编译

webpack -p for building once for production (minification)

webpack -p 来针对发布环境编译(压缩代码)

webpack --watch 来进行开发过程持续的增量编译(飞快地!)

webpack -d 来生成 SourceMaps

4. JavaScript 方言

Webpack 对应 Browsserify transform 和 RequireJS 插件的工具称为 loader. 下边是 Webpack 加载 CoffeeScript 和 Facebook JSX-ES6 的配置(你需要 npm install jsx-loader coffee-loader):

//

= {

entry: './',

output: {

filename: ''

},

module: {

loaders: [

{ test: /\.coffee$/, loader: 'coffee-loader' },

{ test: /\.js$/, loader: 'jsx-loader?harmony' } // loaders 可以接受 querystring 格式的参数

]

}

};

要开启后缀名的自动补全, 你需要设置 参数指明那些文件 Webpack 是要搜索的:

//

= {

entry: './',

output: {

filename: ''

},

module: {

loaders: [

{ test: /\.coffee$/, loader: 'coffee-loader' },

{ test: /\.js$/, loader: 'jsx-loader?harmony' }

]

},

resolve: {

// 现在可以写 require('file') 代替 require('')

extensions: ['', '.js', '.json', '.coffee']

}

};

5. 样式表和图片

首先更新你的代码用 require() 加载静态资源(就像在 Node 里使用 require()):

require('./');

require('./');

var img = ('img');

= require('./');

当你引用 CSS(或者 LESS 吧), Webpack 会将 CSS 内联到 JavaScript 包当中, require() 会在页面当中插入一个 `<style>标签. 当你引入图片, Webpack 在包当中插入对应图片的 URL, 这个 URL 是由require()` 返回的.

你需要配置 Webpack(添加 loader):

//

= {

entry: './',

output: {

path: './build', // 图片和 JS 会到这里来

publicPath: '

/

', // 这个用来成成比如图片的 URL

filename: ''

},

module: {

loaders: [

{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // 用 ! 来连接多个人 loader

{ test: /\.css$/, loader: 'style-loader!css-loader' },

{test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} // 内联 base64 URLs, 限定 <=8k 的图片, 其他的用 URL

]

}

};

6. 功能开关

有些代码我们只想在开发环境使用(比如 log), 或者 dogfooging 的服务器里边(比如内部员工正在测试的功能). 在你的代码中, 引用全局变量吧:

if (__DEV__) {

('Extra logging');

}

// ...

if (__PRERELEASE__) {

showSecretFeature();

}

然后配置 Webpack 当中的对应全局变量:

//

// definePlugin 接收字符串插入到代码当中, 所以你需要的话可以写上 JS 的字符串

var definePlugin = new ({

__DEV__: ((_DEV || 'true')),

__PRERELEASE__: ((_PRERELEASE || 'false'))

});

= {

entry: './',

output: {

filename: ''

},

plugins: [definePlugin]

};

然后你在控制台里用 BUILD_DEV=1 BUILD_PRERELEASE=1 webpack 编译. 注意一下因为 webpack -p 会执行 uglify dead-code elimination, 任何这种代码都会被剔除, 所以你不用担心秘密功能泄漏.

7. 多个进入点(entrypoints)

比如你用 profile 页面跟 feed 页面. 当用户访问 profile, 你不想让他们下载 feed 页面的代码. 因此你创建多个包: 每个页面一个 "main module":

//

= {

entry: {

Profile: './',

Feed: './'

},

output: {

path: 'build',

filename: '[name].js' // 模版基于上边 entry 的 key

}

};

针对 profile, 在页面当中插入 <script src="build/"></script>. feed 页面也是一样.

8. 优化共用代码

feed 页面跟 profile 页面共用不要代码(比如 React 还有通用的样式和 component). Webpack 可以分析出来他们有多少共用模块, 然后生成一个共享的包用于代码的缓存.

//

var webpack = require('webpack');

var commonsPlugin =

new ('');

= {

entry: {

Profile: './',

Feed: './'

},

output: {

path: 'build',

filename: '[name].js'

},

plugins: [commonsPlugin]

};

在上一个步骤的 script 标签前面加上 <script src="build/"></script> 你就能得到廉价的缓存了.

9. 异步加载

CommonJS 是同步的, 但是 Webpack 提供了异步指定依赖的方案. 这对于客户端的路由很有用, 你想要在每个页面都有路由, 但你又不像在真的用到功能之前就下载某个功能的代码.

声明你想要异步加载的那个"分界点". 比如:

if ( === '/feed') {

showLoadingState();

([], function() { // 语法奇葩, 但是有用

hideLoadingState();

require('./feed').show(); // 函数调用后, 模块保证在同步请求下可用

});

} else if ( === '/profile') {

showLoadingState();

([], function() {

hideLoadingState();

require('./profile').show();

});

}

Webpack 会完成其余的工作, 生成额外的 chunk 文件帮你加载好.

Webpack 在 HTML script 标签中加载他们时会假设这些文件是怎你的根路径下. 你可以用 来配置.

//

output: {

path: "/home/proj/public/assets", // path 指向 Webpack 编译能的资源位置

publicPath: "/assets/" // 引用你的文件时考虑使用的地址