webpack打包后的效果_纯webpack打包项目

cnpm install babel-preset-latest --save-dev

cnpm install babel loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime --save-dev

css的loader安装：

cnpm install style-loader css-loader --save-dev

//css3前缀补全:

cnpm install postcss-loader --save-dev

cnpm install autoprefixer --save-dev

sass的loader安装：

cnpm install sass-loader node-sass webpack --save-dev

模板中的loader安装:

cnpm install html-loader --save-dev ( html )

cnpm install ejs-loader --save-dev ( ejs )

图片:

cnpm install file-loader --save-dev

url：

cnpm install url-loader --save-dev

图片压缩：

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

大体配置格式：

module.exports ={

module: {

rules: [//处理js中的loader

{

test:/\.js$/,

loader:'babel-loader',

include: path.resolve(__dirname,'/src'),

exclude: path.resolve(__dirname,'/node_modules')

},//处理css中的loader

{

test:/\.css$/,

loader:'style-loader!css-loader?importLoaders=1!postcss-loader'},//处理sass中的loader

{

test:/\.scss$/,

loader:'style-loader!css-loader!postcss-loader!sass-loader'},//处理html模板中的loader

{

test:/\.html$/,

loader:'html-loader'},//处理ejs模板中的loader,以.tpl后缀结尾的

{

test:/\.tpl$/,

loader:'ejs-loader'},//处理图片中的loader( 通常url/file/image-webpack等loader配合 )

{

test:/\.(png|jpg|gif|svg)$/i,

loader:'file-loader'}

]

}

}

css3前缀要放在插件里，与webpack1的用法不同

module.exports = {

plugins: [

new webpack.LoaderOptionsPlugin({

options: {

postcss: [

require("autoprefixer")({

browsers: ["last 5 versions"]

})

]

}

})

]

}

最终的webpack.config.js配置如下：

1 var webpack = require("webpack");2 var path = require("path");3 var htmlWebpackPlugin = require("html-webpack-plugin");4

5 module.exports ={6 entry: './src/app.js', /*{7 main: './src/scripts/main.js',8 aaa: './src/scripts/aaa.js',9 bbb: './src/scripts/bbb.js',10 ccc: './src/scripts/ccc.js'11 }*/

12 output: {13 path: path.resolve(__dirname,'./dist'),14 filename: 'js/[name]-bundle.js',15 publicPath: 'http://cdn.com/' //上线的绝对路径

16 },17 //插件

18 plugins: [19 new htmlWebpackPlugin({ //根目录的index.html生成dist下的html，可以多个生成

20 filename: 'index.html',21 template: 'index.html',22 inject: 'body', //script标签的放置

23 //title: 'index title test',

24 minify: { //html压缩

25 removeComments: true, //移除注释

26 collapseWhitespace: true //移除空格

27 }28 //chunks: ['main','aaa'], //生成html页面后的script文件的引入

29 //excludeChunks: ['bbb','ccc'] //排除没有用到的script文件，其他的都引进来，比chunks更好匹配

30 }),31 newwebpack.LoaderOptionsPlugin({32 options: {33 postcss: [ //浏览器自动补全前缀

34 require("autoprefixer")({35 browsers: ["last 5 versions"]36 })37 ]38 }39 })40 /*,41 new htmlWebpackPlugin({42 filename: 'b.html',43 template: 'index.html',44 inject: 'body',45 title: "this is b.html",46 //chunks: ['bbb'],47 //excludeChunks: ['aaa','ccc']48 }),49 new htmlWebpackPlugin({50 filename: 'c.html',51 template: 'index.html',52 inject: 'body',53 title: "this is c.html",54 //chunks: ['ccc'],55 //excludeChunks: ['aaa','bbb']56 })*/

57 ],58 module:{59 rules: [ //1.0的是loaders

60 //处理js中的loader

61 {62 test: /\.js$/,63 loader: 'babel-loader',64 include: path.resolve(__dirname,'/src'), //指定打包的文件

65 exclude: path.resolve(__dirname,'/node_modules') //排除打包的文件，加速打包时间

66 },67 //处理css中的loader

68 {69 test: /\.css$/,70 loader: 'style-loader!css-loader?importLoaders=1!postcss-loader' //@import进来的样式在问号后加

71 },72 //处理sass中的loader

73 {74 test: /\.scss$/,75 loader: 'style-loader!css-loader!postcss-loader!sass-loader'

76 },77 //处理html模板中的loader

78 {79 test: /\.html$/,80 loader: 'html-loader'

81 },82 //处理ejs模板中的loader,以.tpl后缀结尾的

83 {84 test: /\.tpl$/,85 loader: 'ejs-loader'

86 },87 //处理图片中的loader,file-loader,url-loader,image-webpack-loader相互配合(图片格式转换base64 图片压缩)

88 {89 test: /\.(png|jpg|gif|svg)$/i, //模板中的图片放相对路径: src="${require('../imgs/aaa.jpg')}"

90 loader: 'url-loader'

91 }92 ]93 }94

95 }

配置后的东西可以在这里看到package.json( 也可在这里设置其他 )：

{"name": "webpack-demo","version": "2.0.0","description": "wabpack demo","main": "index.js","babel": {"presets": ["latest"]

},"scripts": {"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --port 8081","build": "cross-env NODE_ENV=production webpack --progress --colors --display modules --display reason --hide-modules"},"keywords": ["wabpcck"],"author": "wu","license": "ISC","devDependencies": {"autoprefixer": "^6.7.7","babel": "^6.23.0","babel-core": "^6.24.0","babel-plugin-transform-runtime": "^6.23.0","babel-preset-es2015": "^6.24.0","babel-preset-latest": "^6.24.0","babel-runtime": "^6.23.0","css-loader": "^0.28.0","ejs-loader": "^0.3.0","file-loader": "^0.11.1","html-loader": "^0.4.5","html-webpack-plugin": "^2.28.0","image-webpack-loader": "^3.3.0","imagemin-pngquant": "^5.0.0","install": "^0.8.8","loader": "^2.1.1","node-sass": "^4.5.2","postcss-loader": "^1.3.3","sass-loader": "^6.0.3","style-loader": "^0.16.1","url-loader": "^0.5.8","webpack": "^2.3.3"}

}