This is the 11th day of my participation in the Gwen Challenge.More article challenges

Come on, come on, get day10

5. output

Output: Even if there are multiple entry files, there is only one output configuration

var path = require('path')
    var baseConfig = {
        entry: {
            main: './src/index.js'
        },
        output: {
            filename: 'main.js'.path: path.resolve('./build')}}module.exports = baseConfig
Copy the code

If you define multiple entry files, we need to use placeholders to ensure that the output file is unique

output: {
        filename: '[name].js'.path: path.resolve('./build')}Copy the code

With so little configuration, you can run a server and use the command NPM start or NPM run build locally to package our code for distribution

6. Loader

Loader is used for:

Implement processing of files in different formats, such as SCSS to CSS, or typescript to JS

Transform these files so that they can be added to the dependency diagram

Loader is one of the most important parts of Webpack. By using different Loaders, we can call external scripts or tools to process files of different formats. Loader needs to be configured separately with Module in webpack.config.js, and the configuration is as follows:

  • Test: Regular expression that matches the extension of the file being processed (required)Copy the code
  • Loader: Name of the loader (mandatory)Copy the code
  • Include /exclude: Manually add files to be processed and exclude unnecessary files (optional)Copy the code
  • Query: Provides additional setup options for loadersCopy the code
  • ex: 
Copy the code
        var baseConfig = {
                    module: {
                        rules: [{test: /* Matches the re */ for the file suffix,
                                use: [
                                    loader: * / / * loader name,
                                    query: /* Additional configuration */}]}}Copy the code

For loader to work, we need a regular expression to identify the file we want to modify, and then an array to represent the loader we want to use. Of course, the loader we need to install through NPM. For example, if we need to parse less files, the configuration of webpack.config.js is as follows:

var baseConfig = {
                entry: {
                    main: './src/index.js'
                },
                output: {
                    filename: '[name].js'.path: path.resolve('./build')},devServer: {
                    contentBase: './src'.historyApiFallBack: true.inline: true
                },
                module: {
                    rules: [{test: /\.less$/,
                            use: [
                                {loader: 'style-loader'},
                                {loader: 'css-loader'},
                                {loader: 'less-loader'}].exclude: /node_modules/}}}]Copy the code