Home Web Front-end JS Tutorial Detailed explanation of webpack's mobile terminal automated construction rem method

Detailed explanation of webpack's mobile terminal automated construction rem method

Apr 11, 2018 pm 01:34 PM
web webpack automation

This time I will bring you a detailed explanation of the automatic construction of rem on the mobile terminal of webpack. What are the precautions for automatic construction of rem on the mobile terminal of webpack? The following is a practical case, let's take a look.

1 Following the old video tutorial, I found that the various plug-in versions of node npm webpack px2rem are different and useless at all

2. The tutorials on the Internet were lacking and incomplete. It took me a long time to figure it out. I thought about manually setting the cssrem of vscode, but I was still not convinced. I pieced it together and finally figured it out. The following method is provided, I hope it will be helpful for everyone to automatically build rem for mobile terminals

1 I won’t go into detail about installing vue-cli, everyone should know it

2 Install and configure px2rem-loader (postcss is not used here. After trying many problems, I decided to use this)

The first step: npm install px2rem-loader

Part 2: Add

object under webpack.base.conf.js. Here I use sass. If you use others, just follow the following rules. I believe everyone can understand it

module.exports={
module: {
  rules: [
   {
    test: /\.(css|less|scss)(\?.*)?$/,
    loader: 'style-loader!css-loader!sass-loader!less-loader!postcss-loader'
   }
  ]
 }
}
Copy after login
Step 3: Add something to the plugins under webpack.dev.conf.js. Everyone must pay attention to the remUnit attribute, which is 40px in the case of Apple 5. I set it as 40 here, and some people set it as 80. Here I have 40 It is to be used with hotcss. I will talk about it below

 plugins: [
  new webpack.LoaderOptionsPlugin({
   // webpack 2.0之后, 此配置不能直接写在自定义配置项中, 必须写在此处
   vue: {
    postcss: [require('postcss-px2rem')({ remUnit: 40, propWhiteList: [] })]
   }
  }
 ]
Copy after login
Part 4: This is something many people don’t know. Many people just miss this step. Find const cssLoader under utils.js and add ?importLoaders=1

 const cssLoader = {
  loader: 'css-loader?importLoaders=1',
  options: {
   minimize: process.env.NODE_ENV === 'production',
   sourceMap: options.sourceMap
  }
 }
Copy after login
The installation is complete so far

Enter

font-size:40px

Output font-size:1rem (under iphone)

3 We all know that the pixel ratio of devices is different, so we use hotcss to adjust the pixel ratio of the device. Link

I put it in src/assets/js/, you can follow your habits

To introduce a method, you can define any name yourself. Here I changed hotcss.js to

viewport.js

module.exports = {
 entry: {
  app: './src/main.js',
  rem: './src/assets/js/viewport.js'
 }
}
Copy after login
That's it!

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use PHP’s iterator interface Iterator

php to decompress the contents of the zip package to the specified directory Detailed explanation of steps

The above is the detailed content of Detailed explanation of webpack's mobile terminal automated construction rem method. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Understand the differences and comparisons between SpringBoot and SpringMVC Understand the differences and comparisons between SpringBoot and SpringMVC Dec 29, 2023 am 09:20 AM

Compare SpringBoot and SpringMVC and understand their differences. With the continuous development of Java development, the Spring framework has become the first choice for many developers and enterprises. In the Spring ecosystem, SpringBoot and SpringMVC are two very important components. Although they are both based on the Spring framework, there are some differences in functions and usage. This article will focus on comparing SpringBoot and Spring

Jenkins in PHP Continuous Integration: Master of Build and Deployment Automation Jenkins in PHP Continuous Integration: Master of Build and Deployment Automation Feb 19, 2024 pm 06:51 PM

In modern software development, continuous integration (CI) has become an important practice to improve code quality and development efficiency. Among them, Jenkins is a mature and powerful open source CI tool, especially suitable for PHP applications. The following content will delve into how to use Jenkins to implement PHP continuous integration, and provide specific sample code and detailed steps. Jenkins installation and configuration First, Jenkins needs to be installed on the server. Just download and install the latest version from its official website. After the installation is complete, some basic configuration is required, including setting up an administrator account, plug-in installation, and job configuration. Create a new job On the Jenkins dashboard, click the "New Job" button. Select "Frees

How to delete Apple shortcut command automation How to delete Apple shortcut command automation Feb 20, 2024 pm 10:36 PM

How to Delete Apple Shortcut Automation With the launch of Apple's new iOS13 system, users can use shortcuts (Apple Shortcuts) to customize and automate various mobile phone operations, which greatly improves the user's mobile phone experience. However, sometimes we may need to delete some shortcuts that are no longer needed. So, how to delete Apple shortcut command automation? Method 1: Delete through the Shortcuts app. On your iPhone or iPad, open the "Shortcuts" app. Select in the bottom navigation bar

What are web standards? What are web standards? Oct 18, 2023 pm 05:24 PM

Web standards are a set of specifications and guidelines developed by W3C and other related organizations. It includes standardization of HTML, CSS, JavaScript, DOM, Web accessibility and performance optimization. By following these standards, the compatibility of pages can be improved. , accessibility, maintainability and performance. The goal of web standards is to enable web content to be displayed and interacted consistently on different platforms, browsers and devices, providing better user experience and development efficiency.

How to enable administrative access from the cockpit web UI How to enable administrative access from the cockpit web UI Mar 20, 2024 pm 06:56 PM

Cockpit is a web-based graphical interface for Linux servers. It is mainly intended to make managing Linux servers easier for new/expert users. In this article, we will discuss Cockpit access modes and how to switch administrative access to Cockpit from CockpitWebUI. Content Topics: Cockpit Entry Modes Finding the Current Cockpit Access Mode Enable Administrative Access for Cockpit from CockpitWebUI Disabling Administrative Access for Cockpit from CockpitWebUI Conclusion Cockpit Entry Modes The cockpit has two access modes: Restricted Access: This is the default for the cockpit access mode. In this access mode you cannot access the web user from the cockpit

what does web mean what does web mean Jan 09, 2024 pm 04:50 PM

The web is a global wide area network, also known as the World Wide Web, which is an application form of the Internet. The Web is an information system based on hypertext and hypermedia, which allows users to browse and obtain information by jumping between different web pages through hyperlinks. The basis of the Web is the Internet, which uses unified and standardized protocols and languages ​​to enable data exchange and information sharing between different computers.

Is PHP front-end or back-end in web development? Is PHP front-end or back-end in web development? Mar 24, 2024 pm 02:18 PM

PHP belongs to the backend in web development. PHP is a server-side scripting language, mainly used to process server-side logic and generate dynamic web content. Compared with front-end technology, PHP is more used for back-end operations such as interacting with databases, processing user requests, and generating page content. Next, specific code examples will be used to illustrate the application of PHP in back-end development. First, let's look at a simple PHP code example for connecting to a database and querying data:

How Robotics and Artificial Intelligence Can Automate Supply Chains How Robotics and Artificial Intelligence Can Automate Supply Chains Feb 05, 2024 pm 04:40 PM

Automation technology is being widely used in different industries, especially in the supply chain field. Today, it has become an important part of supply chain management software. In the future, with the further development of automation technology, the entire supply chain and supply chain management software will undergo major changes. This will lead to more efficient logistics and inventory management, improve the speed and quality of production and delivery, and in turn promote the development and competitiveness of enterprises. Forward-thinking supply chain players are ready to deal with the new situation. CIOs should take the lead in ensuring the best outcomes for their organizations, and understanding the role of robotics, artificial intelligence, and automation in the supply chain is critical. What is supply chain automation? Supply chain automation refers to the use of technological means to reduce or eliminate human participation in supply chain activities. it covers a variety of

See all articles