webpack--Simple Introduction (2)

1. IntroductionWebpack only supports native JavaScript modules, but static file modules like Css,less,typescript,jsx,coffeescript, pictures, etc. We are able to manage it uniformly through the module loader (webpack-loader). Loader can be understood as a converter for modules and resources, which itself is a function that accepts the source file as a parameter and returns the result of the transformation. Loaders can be concatenated, and the output of one loader can be used as input to the next loader and eventually back to JavaScript.
2. InstallationLoader list http://webpack.github.io/docs/list-of-loaders.html Find the language that needs to be loaded such as JSON we click on JSON to go to Loader-json GitHub for installation 3. UseCreate a skeleton of the same project as the previous blog. Dependencies Required for installation:

$NPM Install  css-loader style-loader--save-dev

Package.json
{
  "name": "Demo1",
  "version": "1.0.0",
  "description": "",
  "main": "Index.js",
  "Scripts": {
    "test": "Echo \" Error:no test specified\ "&& exit 1"
  },
  "author": "Mnixu",
  " License ":" ISC ","
  devdependencies ": {
    " Css-loader ":" ^0.23.1 ","
    Style-loader ":" ^0.13.1 ",
    " Webpack ":" ^1.13.1 "
  }
}

New main.js:

Main.js
require ('./style.css ')

New STYLE.CSS:

Style.css
Body {
    background:blue;
}

New index.html:

index.html
 

New webpack.config.js:
Module.exports = { 
  entry: './main.js ',
  output: {
    filename: ' Bundle.js '
  },
  module:{
      loaders:[
        { 
            test:/\.css$/,
            exclude:/node_modules/,     //compile Node_modules except loader folder
            : ' Style-loader!css-loader '//exclamation point connect two loaders, Css-loader parse CSS file Style-loader insert style into HTML page
        },
      ]}
}
 

Package to see our page background turned blue.

Loaders List http://webpack.github.io/docs/list-of-loaders.html
4. PluginsIn Webpack we can use plug-ins to meet certain requirements, for example, we can use UGLIFYJS Plugin to output a compressed file because Uglifyjs Plugin is a plugin of webpack we do not need to rely on the module, but when using other plug-ins, We may need to rely on modules:
index.html
 

 
Main.js
var thisislongname = "haha";
Thisislongname + = ' Minixu ';
document.write (' 
 

 
Webpack.config.js
var webpack = require (' Webpack ');
Module.exports = {
    entry: './main.js ',
    output: {
        filename: ' Bundle.js '
    },
    plugins: [
        New Webpack.optimize.UglifyJsPlugin ({
        compress: {
            warnings:false
        }
        })
    ]
}
After packing, we found that our bundle.js was compressed.

 

Plugin list http://webpack.github.io/docs/list-of-plugins.html

 
5. Development toolsWebpack-dev-server is a small, node. JS Express service that allows us to automatically update code after we change the code without having to execute the webpack command again. And the best thing is that it listens to our code in real time through the Socket.io service, and when they change, the browser automatically refreshes. Global Installation:
$NPM Install Webpack-dev-server-g
Run:
Webpack-dev-server
To run our just project:

It will start a service and we can access http://localhost:8080/webpack-dev-server/through the browser. You'll see the app Ready status bar at the top, and you can use Webpack-dev-server--inline to start the service if you want to get rid of it. In fact, the browser opened http://localhost:8080/can also access the service, but there is no hot load effect

Note: This dev server will have the package generated files in memory instead of the hard drive, so the generated bundle.js cannot be seen. If you need this file, you still need to enter the Webpack command to package.

 
6. ConclusionHere we simply start up the service without any configuration, but it is best to use Webpack-dev-server to have some configuration, otherwise there will be some problems, which will be covered in later articles.