Tag Archives: webpack

Vue production webpack package PathError [Solved]

Vue version:   “^2.5.2”

Webpack version: ‘^ 3.6.0’

1. Page blank after first packaging   Modify config/index/build/assetspublicpath   Is ‘./’

 1   build: {
 3     index: path.resolve(__dirname, '../dist/index.html'),
 5     // Paths
 6     assetsRoot: path.resolve(__dirname, '../dist'),
 7     assetsSubDirectory: 'static',
 8     assetsPublicPath: './',
 9     .........
10   }

Reason: static is directly used as the direct path during packaging

2. An error is reported again. The page img file introduces an error, which is added under build/utils.JS/

1     if (options.extract) {
2       return ExtractTextPlugin.extract({
3         use: loaders,
4         fallback: 'vue-style-loader',
5         publicPath:"../../"  //  ADD
6       })
7     }

Reason: after packaging, our CSS will be extracted into a separate CSS file. At this time, the relative path relationship between CSS and images will change

The webpack handwritten loader introduces error: Module not found: Error: path argument is not a string

Custom loaders cannot be imported in a way similar to the following

const myLessLoader = require('./loader/my-less-loader');

It needs to be introduced and used in the following ways

path.resolve('./loader/my-less-loader.js')

Attached:

Rules configuration code

module: {
        rules: [
            {
                test: /\.(ts|tsx)$/i,
                use: ['ts-loader'],
                exclude: ['/node_modules/'],
            },
            {
                test: /\.less$/i,
                use: [stylesHandler, 'css-loader', 'postcss-loader', 'less-loader', path.resolve('./loader/my-less-loader.js')],
            }
        ],
    },

Webpack packaging error: cannot find module ‘webpack / bin / config yargs’ error reason, [email protected] Step on the pit~

Create a new project, and the webpack reports an error when the project starts. The error is as follows: cannot find module ‘webpack/bin/config yargs’

    The version number of my local webpack is 5  

        Many methods have been searched on the Internet, and almost all of them have been uninstalled   webpack webpack-cli webpack-dev-server    But it didn’t succeed.

Reason: This is the current version of webpack dev- [email protected] I won’t support it [email protected]

Then lower the version number of the webpack.

The version of webpack can be installed as 3xxx.

Conclusion: the version of webpack CLI and webpack dev server can be solved as long as it is 3. X.x. the version of webpack is greater than 4. X.x.x and is not supported

 

[Solved] Webpack Error: [webpack-cli] Unable to load ‘@webpack-cli/serve’ command

To facilitate development and debugging, install webpack dev server

Webpack dev server allows webpack to monitor changes in project source code for automatic packaging and construction.

Install webpack dev server

npm install [email protected] -D

After installation, execute NPM run dev to report an error!

[webpack-cli] Unable to load ‘@webpack-cli/serve’ command

[webpack-cli] TypeError: options.forEach is not a function

Read the report incorrectly, which means that “[webpack cli] cannot load the” @ webpack cli/serve “command”. I think it should be installed if the webpack cli cannot be loaded.

Solution:

Execute the following command:

npm install webpack-cli --save-dev

Then Run npm run dev

okay~

Unexpected token of webpack package error

The project needs to be packaged and deployed to the server recently. During the packaging process, the following unexpected token appears after NPM run build: punc (() [/~/_element- [email protected] @element-ui/packages/col/src/col.js:23,0][static/js/0.3fbe30ed5a683f62d6bc.js:13890,10]

It literally means that the error is from uglifyjs. An unexpected ‘(‘ appears in line 23 under col.js. Open the col.js file to view it

The parentheses of this function cannot be recognized. After online query, it turns out that uglifyjs cannot parse ES6. The col file under element UI uses ES6 syntax, so it cannot be parsed. The solution is to ask Babel to parse the failed package during packaging. Open webpack.base.conf.js, which can be configured as follows

Then build again and you’re done

 

Webpack learning 1: webpack package error reporting

I want to learn webpack again these days. Before, I just knew how to use it. I learned the video of technology fat. His webpack is version 3.6. I began to practice step by step according to the steps of the video, using vscode

When packing, an error is reported

Check your webpack version: 4.22.0. It is found that your webpack version is too high. The previous command is no longer applicable. Later, use the command: webpack Src/entry.js – O dist/bundle.js

You can see that entry.js has been packaged as a bundle.js file, but this has not been packaged successfully! Because there is no red error when packing, but there is a yellow warning. As shown below

The warning in the yellow part means that there are two modes: development mode and production mode. Next, find package.json. Add the “dev” and “build” information and their values

 

 

Webpack reports an error when using the cleanwebpackplugin plug-in

Webpack reports an error when using the cleanwebpackplugin plug-in

In the process of learning to use webpack, when using the cleanwebpackplugin plug-in, the plug-in installation is normal, as shown in the figure:

Configure webpack.config.js according to the official guidelines:

...
const CleanWebpackPlugin = require('clean-webpack-plugin');
...
plugins: [
     new CleanWebpackPlugin(['dist']),
]
...

After NPM run build, a large error is reported, as shown in the figure:

It is found that the error lies in the sentence cleanwebpackplugin is not a constructor. The specific reason should be that the plug-in may be updated, but it is not updated in the official guide. Find out the solution online and modify the configuration in webpack.config.js:

...
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
...
plugins: [
    new CleanWebpackPlugin()
]
...

Now run NPM run build, and no error is found. According to the description of the official guide, check the/dist folder and you will no longer see the old files, but only the files generated after construction

The/dist folder obtained in this way is relatively “clean”, that is, the official said that “cleaning the/dist folder before each build is a recommended practice, so only the files used will be generated.”

Error reporting of require occurs during webpack packaging

Error description

Usually, problems often occur in the target: 'node' environment

There is a problem in the compiled file. Use require as follows:

// for example 1：
const reload = require('require-reload')(requireFunc)

// for example 2：
function main () {
    var data = require(dataPath)
}

An error will be reported when packing:

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
Critical dependency: the request of a dependency is an expression

Error resolution

Add the following code to the compiled file:

const requireFunc = typeof __webpack_require__=== 'function' ?__non_webpack_require__: require

(PS: the scheme was found in Du Niang, which is not original. Because the original text can not be found, you can record it yourself so that you can find it easily when you encounter a problem next time.)

Solutions to the problem that image webpack loader cannot be installed or the installation is stuck

Don’t panic in case of data tilt, teach you to easily obtain the slope of table tilt>>>

Using image compression in webpack can greatly reduce the packet size, and it is also an important optimization point for the front end. At present, there are many methods that can be implemented, but since we use webpack , we should be a little more lazy, no matter after a configuration, how good, ha ha ha

Here, it is recommended to use image webpack loader , as well as such excuses as img loader and imagemin webpack plugin . In fact, the underlying calls are similar image webpack loader is also very easy to use. You only need to configure a loader 

{
    test: /\.(png|gif|jpe?g|svg)$/i,
    exclude:[path.resolve(process.cwd(), 'src/assets/css')],
    use: [
        {
            loader: 'url-loader',
            options: {
                limit: 1024,
                name: '[hash:8].[ext]',
                useRelativePath: false,
                outputPath: function(fileName){
                    return 'assets/images/'+fileName
                }
            }
        },
        {
            loader:'image-webpack-loader'
        }
    ]
}

However, there was something wrong with the installation. Originally, the computer at work was good, but it couldn’t be installed when I went home. When I installed it, it got stuck and didn’t move for a long time. Alas, I’m tired. I tried all kinds of ways to give up, but I saw that someone said that I could use cnpm to have a try, so I held the mentality of having a try, and it was successful. Ha ha ha, it’s beautiful

Specific operation

1. If image webpack loader has been installed, uninstall it first

yarn remove image-webpack-loader   // npm uninstall image-webpack-loader

2. To use cnpm , this step means to install cnpm and then set the global registry as the image of Alibaba, which is faster in China

npm install cnpm -g --registry=https://registry.npm.taobao.org

3. Use cnpm to install image webpack loader and you will find that it will be installed soon

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

Note: if you have tried to use yarn or NPM to install before, you must first uninstall and use cnpm to install

I wish you success