Эти вещи о веб-пакете

внешний фреймворк
Будь то vue-cli или react-sprite, на самом деле они реализованы на основе webpack. Только подумайте, если нет строительных лесов, сможете ли вы построить их сами? После прочтения этого блога вы поймете, что имеет webpak

На самом деле, вебпак не такой уж и волшебный, это инструмент для упаковки, и он может упаковывать только сам js, а картинки, css и html на самом деле доделываются его загрузчиком и плагином. 

Файл webpack.config.js, по имени вы можете сказать, что это файл конфигурации webpack. Файл обычно включает в себя: входную запись, экспортный вывод, загрузчик и подключаемый модуль.

const path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/1.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'  },
  module: {
    rules: [{
      test: /\.css$/,
      use: ['style-loader', 'css-loader', 'postcss-loader']
    }]
  }}

Давайте разберем приведенный выше код,

Путь в первой строке на самом деле является основным модулем узла, а веб-пакет на самом деле является продуктом, основанным на узле.Если на вашем компьютере нет узла, вы не можете установить веб-пакет. 

Далее будут выставлены:

mode может указать, является ли это средой разработки или производственной средой. В скаффолдинге нет этого пункта, потому что он разделен на dev.conf.js и prod.conf.js. 

entry указывает файл записи, который вы хотите упаковать,

output указывает, куда вы хотите упаковать, и имя файла упаковки.

Модуль модуля обычно используется для установки css, изображений и других загрузчиков, которые будут упакованы в ваш код.

Выше показан загрузчик для разбора css.Некоторым должно быть интересно, почему их три:

style-loader: создаст тег стиля и поместит стиль на страницу

css-loader: преобразовать код css в строку, приемлемую для js

post-loader: Ищите стили, требующие совместимости браузера и префикса, такие как -webkit-, вы его не добавляли, но загрузчик поможет вам это сделать, не так ли это беззаботно? Отличие этого загрузчика в том, что он использует файл конфигурации автопрефиксера.

Это также объясняет, почему вам нужно написать три загрузчика для языков расширения, таких как less и sass, в вашем проекте. 

Примечание. Порядок трех загрузчиков не может быть неправильным, и загрузчики выполняются справа налево. Очередной devtool не нужен.Он сохранит вид кода до компиляции,что удобно для отладки.При онлайне его надо отключать,иначе размер вашего пакета сильно увеличится. 

Настройте веб-пакет самостоятельно:


Файл bundle.js в сборке выше — это файл, сгенерированный после упаковки. webpack.config.js — это приведенный выше код, postcss.config.js — это файл конфигурации, необходимый для postcss-loader.

//1.js
import '../css/1.css'
console.log(111)

//postcss.config.js
const autoprefixer = require('autoprefixer')
module.exports = {  plugins: [    autoprefixer  ]}

//1.css
#div1 {
  width: 200px;
  height: 200px;
  transition: 1s all ease;
  background-color: rgb(148, 148, 148);
}
#div1:hover {
  transform: rotateY(60deg)
}

На этом этапе запуск webpack в командной строке сгенерирует указанную выше папку сборки, откройте index.html, и вы обнаружите, что это css и js, которые мы написали сами. На этом упаковка завершена, она очень простая?

Нам также может быть любопытно, почему webpack может создавать сервисную среду и реализовывать такие функции, как горячие обновления, что означает webpack-dev-server.

Реализовать горячее обновление:

Это не требует от нас настройки, но требует зависимостей, поэтому нам нужно:

npm i webpack webpack-cli webpack-dev-server

Примечание. Команда запуска здесь должна быть настроена в файле package.json.

{  
"scripts": { 
   "dev": "webpack-dev-server --progress --hot",  
},  
"devDependencies": {
    "autoprefixer": "^9.5.1",
    "css-loader": "^2.1.1", 
   "postcss-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  }}

На этом этапе, когда вы введете npm run dev в командной строке, вы обнаружите, что ваш проект уже прослушивает порт 8080.


Если вы хотите настроить webpack-dev-server, вы также можете настроить его в webpack.config.js:

devServer:{
    hot: true,        //设置热更新
    host: 'localhost', //可选，ip
    port: 3000, //可选，端口
    contentBase:path.resolve(__dirname,'build'), //可选，基本目录结构
    compress: true, //可选，压缩    proxy: {
        '/api': {
            target: 'http://localhost:8081',
            pathRewrite: {'^/api': '/data'} 
//本来是反向代理去http://localhost:8081/api，rewrite之后就反向代理去http://localhost:8081/data
        }
    }}

До сих пор сгенерированный нами файл index.html на самом деле был локальным файлом, так как же нам сгенерировать html-файл, к которому будет обращаться сервер? Здесь мы представим плагин html-wepack-plugin.

npm i html-webpack-plugin -S

  plugins: [
    new HtmlWebpackPlugin({
      template: './build/index.html'
    }),    
new webpack.HotModuleReplacementPlugin({})
  ]}

Здесь я помещаю index.html в свою папку сборки.

На данный момент фактически существует небольшой прототип строительных лесов. Остальное для настройки различных загрузчиков.

Поскольку конфигурация загрузчика похожа, она не будет здесь представлена.

Для получения подробной информации нажмите здесьwww.webpackjs.com/loaders/

Прикрепите полный файл webpack.config.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',  entry: './src/1.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'  
},  
module: {
    rules: [
        { test: /\.css$/,      use: ['style-loader', 'css-loader', 'postcss-loader']    }
    ]
  },
  devServer: {
    host: 'localhost', //可选，ip
    port: 3000, //可选，端口
    contentBase: path.resolve(__dirname, 'build'), //可选，基本目录结构
    compress: true, //可选，压缩    hot: true  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './build/index.html'
    }),
    new webpack.HotModuleReplacementPlugin({})
  ]}


Категории