This is the second day of my participation in Gwen Challenge

Basic configuration of Entry and Output

As the name implies, entry is the packaged entry file, and Output is the packaged export file.

module.exports = {
    entry: {
        main: './src/index.js'.list: './src/list.js'
    },
    output: {
        filename: 'bundle.js'.path: path.resolve(__dirname, 'dist')}}Copy the code
  • In the above code blockEntryThe configuration is multi-file entry, wheremainThe import file issrcIn the directoryindex.js;
  • The above code block running package will report an error because the entry file has two but the exit filefilenameWrite dead will result in two name conflicts after packaging, so when we have more than one entry file, we should follow the following configuration write;
 output: {
    filename: '[name].js'.path: path.resolve(__dirname, 'dist')}Copy the code

In this way, the packaged file will not report errors, and it will automatically help us to introduce packaged JS, as follows:

<html>
    <script src="./main.js"></script>
    <script src="./list.js"></script>
</html>
Copy the code

SRC =”./main.js”; SRC =”./main.js”; SRC =”./main.js”;

 output: {
    publicPath: 'http://xxx.com'.filename: '[name].js'.path: path.resolve(__dirname, 'dist')}Copy the code

If you configure publicPath in the export file, the packaged file will become SRC =”http://xxx.com/main.js”.

Use loader to process images

When an image is referenced in HTML, an error will be reported during webpack packaging, because Webpack cannot recognize this image. At this time, loader is needed to help Webpack identify the image.

module.exports = {
    module: {
        rules: [{test:/\.jpg$/,
            use: {
                loader: 'url-loader'.options: {
                    name: '[name]_[hash].[ext]'.outputPath: 'images/'.limit: 10240}}}]}}Copy the code
  • The rules are configured in rules under Module, and the code above is executed when WebPack recognizes the JPG suffixurl-loaderTo convert;
  • optionsYes configuration option[]Is the symbol of a placeholder,[name]The name that identifies the picture,[hash]Generating random strings,extIdentify the suffix of the picture;
  • When we need to package the image resources intoimagesThis parameter can be configured in the directoryoutputPath;
  • limitIs to limit the image size due to the use ofurl-loaderIf the image is smaller than 10240 bytes, it will be packaged into JS as base64. If the image is larger than 10240 bytes, it will be generatedimagesFolder and exist in this directory;

Use loader to process styles

Import CSS files are also unrecognized by WebPack, so we need to continue adding rules to rules:

{
    test:/\.css$/,
    use: [
        'style-loader'.'css-loader'.'postcss-loader']}Copy the code
  • css-loaderWhat have you done for us?
    • CSS Loader will help us analyze the relationship between several CSS files, and finally combine these CSS files into a CSS;
  • style-loaderWhat does it do?
    • After gettingcss-loaderAfter the generated CSS content,style-loaderThis content is mounted to the page, and the head section of the packed page automatically introduces onestyleThe tag, the tag isstyle-loaderHelped us mount it;
    • So we need to cooperate when we work with CSS filescss-loaderAs well asstyle-loaderUse it together;
  • What does postCSs-loader do?
    • Here,postcss-loaderTo add private attributes to the browser kernel;
    • After adding this loader, it will findpostcss.config.jsThe configuration is as follows:
    •   // Install: NPM install autoprefixer --save
  module.exports = {
    plugins: [
          require('autoprefixer')]}Copy the code
    • autoprefixerThe effect is to prefix the CSS file with compatibility.

If you are using SCSS, you need to add rules:

{
    test: /\.scss$/,
    use: {
        'style-loader',
        {
            loader: 'css-loader'.options: {
                importLoaders: 2}},'sass-loader'.'postcss-loader'}}Copy the code

ImportLoaders =2 specifies two loaders after csS-loader to process imported resources, two are sass-loader and postCSs-loader.

Use HtmlWebpackPlugin to generate the template

When using Webpack, generate dist directory and click in to see js and CSS files but no HTML files need to be imported manually. What should we do in this case?

// Install NPM I html-webpack-plugin clean-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }), 
        new CleanWebpackPlugin(['dist'])]}Copy the code

HtmlWebpackPlugin is used to generate an HTML after packaging. Which HTML template is used to generate the GENERATED HTML? SRC /index.html path as a template;

We always need to manually delete the dist directory when we repackage. It’s a hassle to do that. Is there any way to delete it automatically? The CleanWebpackPlugin is configured as above to delete the dist directory before each package.

conclusion

The above is some common basic configuration in Webpack, detailed configuration also refer to the documentation to learn;