Webpack Packaging js,css and pictures

1.Webpack Package Default profile Webpack.config.js

2, Packaging js file: There is this file and configuration can be directly on the CMD webpack packaging, no this file to be entered on the cmd webpack main.js build.js

3. Package CSS file: to enter NPM install Style-loader css-loader installation on cmd

 module.exports={ //  config js  entry: './main.js ', // webpack the source file to be packaged   output:{filename:  ' build.js ' //  packaged output file name  }, module:{loaders:[{                Test: /\.css$/, //  configure CSS  Loader: ' Style-loader!css-loader ' }, {test: /\.                (png|jpg) $/, //  Configure the pictures in CSS, examples of images in HTML are below  Loader: ' url-loader?limit=8192 ' }]}};  

Url-loader In addition to the Limit field, you can specify the directory and file name of the picture package by using the Name field:

/\. (png|jpg) $/' url-loader?limit=8192&name=images/[hash:8]. [Name]. [ext] ' }]}

The Name field in the previous example specifies that a folder named images is generated under the packaging root directory (Output.path) with a 8-bit hash value preceded by the original picture name.

The CSS file and the images folder maintain the same level, so you can access the image without making a task change. The difference is that after the packaging of the picture added a hash value, the Bundle.css file is also the introduction of a hash value of the picture.

Output.publicpath represents the publishing address of a resource, and when configured, all resources referenced by relative paths in the packaged file are replaced by the configured path.

' Dist'/assets/' bulid.js '}

4, Packaging pictures: There are three kinds of packaging pictures, HTML images, CSS images, JS pictures, in the webpack to introduce a picture needs to rely on Url-loader this loader. NPM Install Url-loader--save-dev

The Test property represents a type of picture that can be matched, except PNG, JPG, and so on, separated by a vertical bar. The limit field behind the loader represents the picture packing limit, which does not mean that it cannot be packaged, but that it automatically turns into a base64 code reference when the size of the picture is less than the limit.

Because Webpack does not handle HTML very well, it is relatively troublesome to package the image resources in HTML files. Here you need to reference a plugin--html-withimg-loder $ npm Install Html-withimg-loader--save-dev

module: {loaders: [    {        /\.html$/,        ' Html-withimg-loader '    }]}

Note: Referencing HTML files in Build.js

Import '.. /index.html ';

The picture in JS should be a modular way to refer to the picture path

var imgurl = require ('./images/bg.jpg '= '  '= Imgtempl

1) branch files that need to be referenced

// config file exit module.exports={    addfun:add};

2) The primary file to be referenced

Require ("./com.css"); // introducing a CSS file to package var cale=require ('./add.js '); // introduce the JS file to be packaged Console.log (Cale.addfun); // Calling Function Methods

Note: The compression build.js is entered directly on the cmd webpack-p

Webpack Packaging js,css and pictures